react-native - React Native LIstItem 组件 TouchableHighlight onPress 不起作用

Question

我有以下 React Native ListItem并且 onPress 没有登录到控制台:

    <ListItem
        rightIcon={{name: 'delete', style: {color: 'white'}}}
        component={TouchableHighlight}
        containerStyle={styles[item.foodType]}
        title={<Text style={styles[item.foodType]}>{item.amount}&nbsp;{item.foodType}&nbsp;<FormattedDateTime epoch={item.when}/></Text>}>
        onPress={() => console.log("Feeding", item) }
    </ListItem> 

其他一切正常，列表看起来不错，等等......

为什么我看不到消息？

Answer 1

你把 ListItem 的结束标签放在 onpress 之前，这是错误的，就像这样把它改成 onpress 之后。

前

<ListItem
    rightIcon={{name: 'delete', style: {color: 'white'}}}
    component={TouchableHighlight}
    containerStyle={styles[item.foodType]}
    title={<Text style={styles[item.foodType]}>{item.amount}&nbsp;{item.foodType}&nbsp;<FormattedDateTime epoch={item.when}/></Text>}>
    onPress={() => console.log("Feeding", item) }
</ListItem> 

后

<ListItem
    rightIcon={{name: 'delete', style: {color: 'white'}}}
    component={TouchableHighlight}
    containerStyle={styles[item.foodType]}
    title={<Text style={styles[item.foodType]}>{item.amount}&nbsp;{item.foodType}&nbsp;<FormattedDateTime epoch={item.when}/></Text>}
    onPress={() => console.log("Feeding", item) }>
</ListItem> 

或者像这样

<ListItem
    rightIcon={{name: 'delete', style: {color: 'white'}}}
    component={TouchableHighlight}
    containerStyle={styles[item.foodType]}
    title={<Text style={styles[item.foodType]}>{item.amount}&nbsp;{item.foodType}&nbsp;<FormattedDateTime epoch={item.when}/></Text>}
    onPress={() => console.log("Feeding", item) }/>