将函数从对象传递到 React Native ListView
Passing function from object to React Native ListView
我在对象内部定义一个函数,然后将其传递给 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 的新手,所以我怀疑这可能是语法问题。谢谢!
您应该像这样从 TouchableOpacity onPress 中删除粗箭头
<TouchableOpacity onPress={item.action}>
这会起作用。
编辑:
我在小吃处创建了一个项目。您可以看到这种方法解决了您的问题。
我在对象内部定义一个函数,然后将其传递给 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 的新手,所以我怀疑这可能是语法问题。谢谢!
您应该像这样从 TouchableOpacity onPress 中删除粗箭头
<TouchableOpacity onPress={item.action}>
这会起作用。
编辑: 我在小吃处创建了一个项目。您可以看到这种方法解决了您的问题。