为什么我的 prop 没有记录或在 React Native 中传递？答案

【问题标题】：Why isn't my prop logging or being passed in React Native?为什么我的 prop 没有记录或在 React Native 中传递？
【发布时间】：2017-11-05 14:48:18
【问题描述】：

我制作了一个名为 IconButton 的组件，它接受一些道具并传递任何额外的道具。

import Icon from 'react-native-vector-icons/FontAwesome';

const IconButton = ({ icon, title, ...props }) => {
    console.log(props); // Actual: {}, expected: { onPress: [function] }
    return (
        <View style={ iconBox } { ...props }>
           <Icon name={ icon } size={ 48 } color="black" />
           <Text>{ title }</Text>
        </View> 
};

然后我渲染它：

const render = () => (
    <IconButton icon='plus' title='add' onPress={ () => console.log('hi') } />
);

但是，当我尝试使用console.log 记录它时，onPress 没有出现；它记录了一个空对象。此外，它没有传递给我的View，因为按下时它没有调用onPress。但是当我通过不同类型的不同道具（例如数字和字符串）时，它显示得很好。

为什么没有将它传递给我的View，为什么没有记录道具？如果这可能会影响任何事情，我也在使用 Expo。我已经设置了一个问题on GitHub。

【问题讨论】：

这很令人沮丧，因为在 Google 上似乎没有其他人遇到这个问题...为什么只有我自己似乎无法通过 props 传递函数...
不确定实际问题，但我通常参考父级onPress={this.props.onPress} 上的道具。这样做的好处是你知道你期待什么道具，而不是通过发送所有东西。
同意。我添加了一个带有允许回调的演示代码的编辑。我将发布我的完整代码，但我有一种感觉，这是因为我的一个导入或某些东西正在破坏 React 本机的工作方式......也许像矢量图标......

标签： reactjs react-native expo

【解决方案1】：

日志记录问题是 Expo 的一个错误，它使用 JSON.stringify 和其他方法提供输出，但没有正确输出对象。该错误还包含诸如 onPress 之类的函数，它们是对象的一部分，并导致 console.log 根本不记录它，请参见此处。问题是 on GitHub，并将在 2017 年 6 月 19 日的下一次 SDK 更新中修复。

现在谈一个不同的问题，View 不需要 onPress 道具，它不应该是可触摸的。要获得可触摸的视图，请尝试以下包装器：

TouchableHighlight，在触摸时，视图中添加了一种色调
TouchableNativeFeedback，仅限 Android，响应触摸的常规视图
TouchableOpacity，触摸时，视图不透明度降低
TouchableWithoutFeedback，触摸时没有可见的反馈，但接受点击（你不应该使用它，所有交互都应该有可见的反馈以获得良好的用户体验）

【讨论】：