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 />);

}} /＆gt; }

我正在努力使这项工作。单击登录按钮后，它应该转到主要活动，因此LoginScreen.js onClick MainActivity.js

https://github.com/raja95shah/reactNative.git＆gt;我的github项目供您查看更多参考。请帮忙。

Answer 1

我只看了你的代码。看起来您需要将初始路径设置为导航器组件。我已修复它并粘贴下面的代码。需要修复的两个文件是index.ios.js和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;

我还使用固定代码向您提交了拉取请求。

React-Native Navigator不工作

1 个答案: