反應原生導航不能在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>