将函数从对象传递到React Native ListView

时间:2019-01-03 18:08:56

标签: javascript reactjs function object native

我正在对象内部定义一个函数,然后将其传递给ListView。

但是我无法在onPress上触发该功能。此刻,按任何按钮都无济于事。

export default class Settings extends Component {
    componentWillMount() {
        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
        const listItems = [
            { title: 'Profile', icon: 'ios-contact', action: () => console.log('Profile') },
            { title: 'Log out', icon: 'ios-log-out', action: () => console.log('Log out') }
        ]
        this.setState({ dataSource: ds.cloneWithRows(listItems) })
    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={(item) => 
                    <TouchableOpacity onPress={() => item.action}>
                        <View>
                            <Ionicons name={item.icon} size={20} />
                            <Text>{item.title}</Text>
                        </View>
                    </TouchableOpacity>
                }
            />
        )
    }
};

我对React / JS还是很陌生,所以我怀疑这可能是语法问题。谢谢!

1 个答案:

答案 0 :(得分:0)

您应该像这样从TouchableOpacity onPress删除粗箭头

<TouchableOpacity onPress={item.action}>

这将起作用。

编辑: 我创建了一个小吃项目。您可以看到这种方法可以解决您的问题。

https://snack.expo.io/HJS68AjWN