反应原生导航不能在TouchableOpacity

Question

我试过react-nativeButton这是工作正常。我想自定义Button，所以这让我去TouchableOpacity。我正在尝试设置反应原始导航，如下图，现在不工作。

我使用这个导航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); 

Answer 1

正是在这条线this.navigate("EnableNotifcation");

一个tpyo错误

我改正了它，现在它正在工作。 this.navigate("EnableNotification");

Answer 2

的onPress道具应该是里面TouchableOpacity，而不是里面的道具观像你拥有了它。看到下面的伪代码

<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>