问题描述
我正在学习 React Native 课程,在一节关于“自定义组件”和“道具”的课程中,我遇到了这个:
{...props.style}
当我问老师时,老师告诉我: JavaScript 中的三个点称为扩展语法或扩展运算符。这允许扩展诸如数组表达式或字符串之类的可迭代对象,或者扩展放置在任何位置的对象表达式。实际上,这里通过 props 来的样式扩展了当前的样式。
但是我对这个很陌生,我没有得到它。有人可以用另一个/更简单的词向我解释吗?也许例子?如果需要,我会将代码放在这里:
这是“自定义按钮.JS”:
import React from 'react';
import {
pressable,Text,StyleSheet,} from 'react-native';
const MashButton = (props) => {
return (
<pressable
onPress={props.onPressFunction}
hitSlop={{ top: 10,bottom: 10,right: 10,left: 10 }}
android_ripple={{ color: '#00f' }}
style={({ pressed }) => [
{ backgroundColor: pressed ? '#dddddd' : props.color },styles.button,{...props.style}
]}
>
<Text style={styles.text}>
{props.title}
</Text>
</pressable>
)
}
const styles = StyleSheet.create({
text: {
color: '#000000',fontSize: 20,margin: 10,textAlign: 'center',},button: {
width: 150,height: 50,alignItems: 'center',})
export default MashButton;
然后在“APP.JS”中有这些:
<MashButton
onPressFunction={onPressHandler}
title={submitted ? 'Clear' : 'Submit'}
color={'#00ff00'}
/>
<MashButton
onPressFunction={() => { }}
title={'Test'}
color={'#ff00ff'}
style={{ margin: 10 }}
/>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)