Question

我创建了一个名为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。

Answer 1

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

现在针对另一个问题，View没有采用onPress道具，它不应该是可触摸的。要获得可触摸的视图，请尝试以下包装器：

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

为什么我的prop不能在React Native中记录或传递？

1 个答案: