[英]React Native: onPress on component doesn't function
So I am using react-native-router-flux
for my navigation in my ReactJS app but I am having difficulties using it with components. 所以我在ReactJS应用程序中导航时使用了
react-native-router-flux
,但是在将其与组件结合使用时遇到了困难。
For example the following code snippet works perfectly by pushing the next page when clicking the links. 例如,以下代码片段可以通过单击链接时推送下一页来完美地工作。
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>
);
}
}
While the following code snippet nothing happens when you press the links. 当下面的代码片段按下链接时,没有任何反应。
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>
);
}
}
Obviously the second code snippet is much more cleaner. 显然,第二个代码段更加简洁。
You have to pass the onPress
prop through to the 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.