单击按钮无法导航到其他组件-React-Native Navigator

Question

var  
  {Text,View,TextInput,TouchableWithoutFeedback,Image,ToastAndroid,Platform,NavigatorIOS,Navigator} = React;

var MainActivity = require('./MainActivity');

class LoginScreen extends React.Component {

Login(){

  return  <Navigator
        initialRoute={{name: 'MainActivity', component: MainActivity, index: 0}}
        renderScene={(route, navigator) =>    {
return React.createElement(<MainActivity />);
  }} />
}

I am trying to make this work. After clicking on login button, it should go to the main activity. So LoginScreen.js onClick MainActivity.js .

My github project for you to check for more reference. Please help.

Answer 1

I just looked at your code. It looks like you need to set up your initial route as a navigator component. I've fixed it and am pasting the code below. The two files that need to be fixed are index.ios.js, and LoginScreen.js.:

index.ios.js

'use strict';


var React = require('react-native');
var {Text,View,TextInput,Navigator, Navigator} = React;

var LoginScreen = require('./LoginScreen');
var MainActivity = require('./MainActivity');

class Trabble extends React.Component {
    render() {
        return (
            <Navigator
            style={{flex:1}}
            initialRoute={{name: 'LoginScreen', component: LoginScreen, index: 0}}
            renderScene={(route, navigator) =>    {
                return React.createElement(route.component, {navigator});
            }} />
        )
    }
}

var Styles = React.StyleSheet.create({
    loginText: {
        fontSize: 50,
        color: "blue",
        marginTop: 100,
        alignSelf: "center"
    },
    usernameText: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        marginTop: 10
    },
    passwordText: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        marginTop: 10
    }
});

React.AppRegistry.registerComponent('Trabble', function() { return Trabble });

LoginScreen.js:

'use strict';


var React = require('react-native');
var {Text,View,TextInput,TouchableWithoutFeedback,Image,ToastAndroid,Platform,NavigatorIOS,Navigator} = React;


var MainActivity = require('./MainActivity');

class LoginScreen extends React.Component {

    login() {
        this.props.navigator.push({
            component: MainActivity
        })
    }

    render() {
        return(
            <View style={styles.loginView}>
                <Image style={styles.image} source={require('./Ionic.png')}/>
                <Text style={styles.loginText}>Chat System</Text>
                <TextInput style={styles.usernameText} placeholder="username" placeholderTextColor="black"></TextInput>
                <TextInput style={styles.passwordText} placeholder="password" placeholderTextColor="black" secureTextEntry></TextInput>
                <TouchableWithoutFeedback  onPress={ () => this.login() }>
                    <View style={styles.loginButton}>
                        <Text style={styles.loginButtonText}>Smit is smart</Text>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback>
                    <View style={styles.signUpButton}>
                        <Text style={styles.signUpButtonText}>Sign Up</Text>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback onPress={ () => this.login() }>
                    <View>
                        <Text style={styles.forgetPasswordText}>Forgot password?</Text>
                    </View>
                </TouchableWithoutFeedback>
        </View>)
    }
}

var styles = React.StyleSheet.create({
    image:{
        height: 150,
        alignSelf: "center",
        marginTop: 50,
        opacity: 1
    },
    loginView:{
      backgroundColor: "#FA8A3A",
        flex: 1
    },
    loginText: {
        fontSize: 50,
        color: "white",
        marginTop: 10,
        alignSelf: "center"
    },
    usernameText: {
        height: 40,
        color: 'black',
        borderColor: 'gray',
        borderWidth: 1,
        marginTop: 10
    },
    passwordText: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        marginTop: 10
    },
    loginButtonText:{
        alignSelf: 'center',
        fontSize: 20,
        color: 'white'

    },
    loginButton:{
        marginTop: 10,
        height: 30,
        backgroundColor: 'blue'
    },
    signUpButtonText:{
        alignSelf: 'center',
        fontSize: 20,
        color: 'white'

    },
    signUpButton:{
        marginTop: 10,
        height: 30,
        backgroundColor: 'grey'
    },
    forgetPasswordText:{
        fontSize: 10,
        alignSelf: 'center',
        marginTop: 10
    }
});

module.exports = LoginScreen;

I've also submitted a pull request to you with the fixed code.