![](/img/trans.png)
[英]React-Native onPress doesn't work when exported as a Component
[英]React Native: onPress on component doesn't function
所以我在ReactJS应用程序中导航时使用了react-native-router-flux
,但是在将其与组件结合使用时遇到了困难。
例如,以下代码片段可以通过单击链接时推送下一页来完美地工作。
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.