如何解决当 React Native 包含“样式”时,三个点 (...) 是什么意思
我正在学习 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 举报,一经查实,本站将立刻删除。