React 本机导航不适用于 TouchableOpacity
React native navigation is not working on TouchableOpacity
我在 Button
上尝试了 react-native
,效果很好。我想自定义 Button
,所以这让我选择了 TouchableOpacity
。我正在尝试设置如下所示的 React 本机导航,但现在无法正常工作。
我用它来导航https://reactnavigation.org/
index.android.js
/**
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from "react";
import {
AppRegistry,
Image,
View,
Text,
Button,
StyleSheet,
TouchableOpacity
} from "react-native";
import { StackNavigator } from "react-navigation";
import EnableNotificationScreen from "./EnableNotificationScreen";
import styles from "./Styles";
import * as strings from "./Strings";
class SplashScreen extends Component {
render() {
console.disableYellowBox = true;
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require("./img/talk_people.png")} />
<Text style={styles.textStyle}> {strings.talk_people} </Text>
<TouchableOpacity>
<View
style={{
backgroundColor: "#FE434C",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
width: 240,
marginTop: 30,
height: 40
}}
onPress={() => {
this.navigate("EnableNotifcation");
}}
>
<Text style={{ color: "white" }}>CONTINUE</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const ScheduledApp = StackNavigator(
{
Splash: {
screen: SplashScreen,
navigationOptions: {
header: {
visible: false
}
}
},
EnableNotification: {
screen: EnableNotificationScreen,
navigationOptions: {
header: {
visible: false
}
}
}
},
{
initialRouteName: "Splash"
}
);
AppRegistry.registerComponent("Scheduled", () => ScheduledApp);
onPress 道具应该在 TouchableOpacity 内部,而不是像您拥有的那样在 View 道具内部。见下面的伪代码
<TouchableOpacity onPress = {...}>
<View style = {{}}>
//Rest of the code
这应该可以解决问题。在旁注中,我建议为您的视图组件添加一个新样式,其中有很多元素:P
编辑:
<TouchableOpacity onPress = {/*do this*/}>
<View style={{ backgroundColor: "#FE434C",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
width: 240, marginTop: 30,
height: 40 }}>
<Text style={{ color: "white" }}>
{"CONTINUE"}
</Text>
</View>
</TouchableOpacity>
这是这一行的 tpyo 错误 this.navigate("EnableNotifcation");
我更正了它,现在可以使用了。 this.navigate("EnableNotification");
使用以下对我有用。使用本机反应 0.62.2。请参阅 TouchableOpacity 在 KeyboardAvoidingView 和 ScrollView keyboardShouldPersistTaps 内。
<ScrollView keyboardShouldPersistTaps="handled">
<KeyboardAvoidingView enabled>
<View>
<TouchableOpacity
onPress={() => functionNameToNavigate('ScreenToMoveOn')}> <Text>Click me</text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ScrollView>
我在 Button
上尝试了 react-native
,效果很好。我想自定义 Button
,所以这让我选择了 TouchableOpacity
。我正在尝试设置如下所示的 React 本机导航,但现在无法正常工作。
我用它来导航https://reactnavigation.org/
index.android.js
/**
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from "react";
import {
AppRegistry,
Image,
View,
Text,
Button,
StyleSheet,
TouchableOpacity
} from "react-native";
import { StackNavigator } from "react-navigation";
import EnableNotificationScreen from "./EnableNotificationScreen";
import styles from "./Styles";
import * as strings from "./Strings";
class SplashScreen extends Component {
render() {
console.disableYellowBox = true;
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require("./img/talk_people.png")} />
<Text style={styles.textStyle}> {strings.talk_people} </Text>
<TouchableOpacity>
<View
style={{
backgroundColor: "#FE434C",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
width: 240,
marginTop: 30,
height: 40
}}
onPress={() => {
this.navigate("EnableNotifcation");
}}
>
<Text style={{ color: "white" }}>CONTINUE</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const ScheduledApp = StackNavigator(
{
Splash: {
screen: SplashScreen,
navigationOptions: {
header: {
visible: false
}
}
},
EnableNotification: {
screen: EnableNotificationScreen,
navigationOptions: {
header: {
visible: false
}
}
}
},
{
initialRouteName: "Splash"
}
);
AppRegistry.registerComponent("Scheduled", () => ScheduledApp);
onPress 道具应该在 TouchableOpacity 内部,而不是像您拥有的那样在 View 道具内部。见下面的伪代码
<TouchableOpacity onPress = {...}>
<View style = {{}}>
//Rest of the code
这应该可以解决问题。在旁注中,我建议为您的视图组件添加一个新样式,其中有很多元素:P
编辑:
<TouchableOpacity onPress = {/*do this*/}>
<View style={{ backgroundColor: "#FE434C",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
width: 240, marginTop: 30,
height: 40 }}>
<Text style={{ color: "white" }}>
{"CONTINUE"}
</Text>
</View>
</TouchableOpacity>
这是这一行的 tpyo 错误 this.navigate("EnableNotifcation");
我更正了它,现在可以使用了。 this.navigate("EnableNotification");
使用以下对我有用。使用本机反应 0.62.2。请参阅 TouchableOpacity 在 KeyboardAvoidingView 和 ScrollView keyboardShouldPersistTaps 内。
<ScrollView keyboardShouldPersistTaps="handled">
<KeyboardAvoidingView enabled>
<View>
<TouchableOpacity
onPress={() => functionNameToNavigate('ScreenToMoveOn')}> <Text>Click me</text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ScrollView>