所以我react-native-router-flux在ReactJS应用程序中使用导航，但是在将其与组件结合使用时遇到困难。
例如，以下代码片段可以通过单击链接时推送下一页来完美地工作。
export default class MainMenuPage extends Component {
render() {
return (
<View>
<Text>Main Menu</Text>
<TouchableOpacity onPress={Actions.bookmarksPage}>
<Text>Bookmarks</Text>
</TouchableOpacity>
<TouchableOpacity onPress={Actions.settingsPage}>
<Text>Settings</Text>
</TouchableOpacity>
</View>
);
}
}
当下面的代码片段按下链接时，没有任何反应。
export default class MainMenuPage extends Component {
render() {
return (
<View>
<Text>Main Menu</Text>
<MenuButton name="Bookmarks" onPress={Actions.bookmarksPage} />
<MenuButton name="Settings" onPress={Actions.settingsPage} />
</View>
);
}
}
class MenuButton extends Component {
render() {
return(
<TouchableOpacity>
<Text>{this.props.name}</Text>
</TouchableOpacity>
);
}
}
显然，第二个代码段更加简洁。
您必须将onPress道具传递到TouchableOpacity：
class MenuButton extends Component {
render() {
return(
<TouchableOpacity onPress={this.props.onPress}>
<Text>{this.props.name}</Text>
</TouchableOpacity>
);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句