I found various similar questions all having different problem and solution. Seems like project architecture is culprit in most of the cases. I could not figure out mine. I want to navigate to Signup screen on click of Get OTP button on PhoneSignup screen.

我发现各种类似的问题都有不同的问题和解决方案。在大多数情况下，似乎项目架构是罪魁祸首。我无法理解我的。我想在PhoneSignup屏幕上单击Get OTP按钮导航到Signup屏幕。

PhoneSignupForm.js

PhoneSignupForm.js

export default class PhoneSignupForm extends Component {    
      render() {
        return (
            <View >
               <TouchableOpacity 
                  onPress={ () => this.props.navigation.navigate('Signup') }
                >
                  <Text>
                    Get OTP
                  </Text>
              </ TouchableOpacity>
            </View>
        );
      }
    }

PhoneSignup.js

PhoneSignup.js

import PhoneSignupForm from './PhoneSignupForm';

export default class PhoneSignup extends Component {
  render() {
    return (
        <View style = {styles.container}>
            <View style = {styles.logoContainer}>
                <Image
                    style = {styles.logo}
                    source = {require('../../icons/hp.png') }
                />
                <Text style = {styles.title}>Hewlett-Packard</Text> 
            </View>
            <View style = {styles.formContainer} >
                // Using PhoneSignupForm component here
                <PhoneSignupForm />
            </View>
        </View>
    );
  }
}

main.js

main.js

import PhoneSignup from '../scenes/phoneSignup';
import Signup from '../scenes/signup';
import { StackNavigator } from 'react-navigation';

const AppNavigation = StackNavigator(
    {
        PhoneSignup: {screen: PhoneSignup},
        Signup: {screen: Signup}
    }
);


export default AppNavigation;

App.js

App.js

import React, { Component } from 'react';
import {KeyboardAvoidingView} from 'react-native';
import PhoneSignup from './src/scenes/phoneSignup';
import Signup from './src/scenes/signup';
import AppNavigation from './src/routes/main';

const  App = () => ( {
  render() {
    return (
      <KeyboardAvoidingView behavior = 'padding' >
        <AppNavigation />
      </KeyboardAvoidingView>
    );
  }
})

export default App;

and finally index.js

最后是index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('DamReact', () => App);

1 个解决方案

export default class PhoneSignup extends Component {
  render() {
    const { navigation } = this.props;
    return (
        <View style = {styles.container}>
            <View style = {styles.logoContainer}>
                <Image
                    style = {styles.logo}
                    source = {require('../../icons/hp.png') }
                />
                <Text style = {styles.title}>Hewlett-Packard</Text> 
            </View>
            <View style = {styles.formContainer} >
                <PhoneSignupForm navigation={navigation} />
            </View>
        </View>
    );
  }
}