Question

I'm trying to navigate to other screen using TouchableHighlight / button but it does not navigate to the other screen . there are no error's . Nothing happens when i press the TouchableHighlight/button its in the same screen .

trackButton() {
    const navigation = this.props.navigation;


    return (
        <View style={styles.footer}>
            {/* <TouchableHighlight underlayColor='transparent' onPress={() => this.gotoTrackingScreen()}> */}
            <TouchableHighlight underlayColor='transparent' onPress={() => this.props.navigation.navigate('faq')}>


                <Text style={this.trackingButtonStyleOS()}>
                    START TRACKING
                </Text>
            </TouchableHighlight>  
            {/* <Button
      onPress={() => this.props.navigation.navigate('Tracking')}
      title="Chat with Lucy"
    /> */}

        </View>
    );
}

we are currently using react navigation:1.0.1 beta

StackNavigator is implemented in index.android.js

const BeaconApp = StackNavigator({ Home: { screen: App, navigationOptions: { header: null } }, Tracking: { screen: TrackingScreen, navigationOptions: { header: null } }})

Answer 1

我认为您的组件命名不符合标准。我看到您尝试制作 trackButton 组件，稍后将由 TrackingScreen 实现。如果 React 使用 UpperCamelCase 而不是 lowerCamelCase 编写，React 会将函数确定为组件。您的组件将不会收到道具，因为它会被假定为常规函数，而常规函数没有道具传递功能。

因此，您的 trackButton 组件没有收到 props.navigation 并且当您单击按钮时什么也没有发生

React navigation not going to other screen

1 个答案: