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

Question

我在对象内部定义一个函数，然后将其传递给 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 的新手，所以我怀疑这可能是语法问题。谢谢！

Answer 1

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

<TouchableOpacity onPress={item.action}>

这会起作用。

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

https://snack.expo.io/HJS68AjWN

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

Passing function from object to React Native ListView

javascript

reactjs

function

object

native