Javascript 无法在单击按钮时导航到其他组件-反应本机导航器 var {文本、视图、文本输入、可触摸无反馈、图像、ToastAndroid、平台、NavigatorIOS、Navigator}=React； var MainActivity=require（'./MainActivity'）； 类LoginScreen扩展了React.Component{ 登录（）{ 返回{ 返回React.createElement（）； }} /> }

我正在努力使这一切顺利进行。单击“登录”按钮后，应转到主活动。所以

LoginScreen.js

onClick

MainActivity.js

---

供您查看更多参考资料。请帮忙

我刚看过你的代码。看起来您需要将初始路线设置为导航器组件。我已经修复了它，正在粘贴下面的代码。需要修复的两个文件是index.ios.js和LoginScreen.js：

index.ios.js

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

“严格使用”；
var React=require（'React-native'）；
var{Text，View，TextInput，Navigator，Navigator}=React；
var LoginScreen=require（'./LoginScreen'）；
var MainActivity=require（'./MainActivity'）；
类Trabble扩展了React.Component{
render（）{
返回(
{
返回React.createElement（route.component，{navigator}）；
}} />
)
}
}
var Styles=React.StyleSheet.create({
loginText：{
尺寸：50，
颜色：“蓝色”，
玛金托普：100，
自我定位：“中心”
},
用户名文本：{
身高：40，
边框颜色：“灰色”，
边框宽度：1，
玛金托普：10
},
密码文本：{
身高：40，
边框颜色：“灰色”，
边框宽度：1，
玛金托普：10
}
});
React.AppRegistry.registerComponent（'Trabble'，function（）{return Trabble}）；

LoginScreen.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 });

“严格使用”；
var React=require（'React-native'）；
var{Text，View，TextInput，触控无反馈，Image，ToastAndroid，Platform，NavigatorIOS，Navigator}=React；
var MainActivity=require（'./MainActivity'）；
类LoginScreen扩展了React.Component{
登录（）{
这个是.props.navigator.push({
组成部分：主要活动
})
}
render（）{
返回(
聊天系统
this.login（）}>
斯密特很聪明
注册
this.login（）}>
忘记密码了？
)
}
}
var styles=React.StyleSheet.create({
图片：{
身高：150，
对准自己：“居中”，
玛金托普：50，
不透明度：1
},
loginView：{
背景色：“FA8A3A”，
弹性：1
},
loginText：{
尺寸：50，
颜色：“白色”，
玛金托普：10，
自我定位：“中心”
},
用户名文本：{
身高：40，
颜色：'黑色'，
边框颜色：“灰色”，
边框宽度：1，
玛金托普：10
},
密码文本：{
身高：40，
边框颜色：“灰色”，
边框宽度：1，
玛金托普：10
},
登录按钮文本：{
对齐自我：“中心”，
尺寸：20，
颜色：“白色”
},
登录按钮：{
玛金托普：10，
身高：30，
背景颜色：“蓝色”
},
signUpButtonText：{
对齐自我：“中心”，
尺寸：20，
颜色：“白色”
},
注册按钮：{
玛金托普：10，
身高：30，
背景颜色：“灰色”
},
伪造密码文本：{
尺寸：10，
对齐自我：“中心”，
玛金托普：10
}
});
module.exports=登录屏幕；

---

我还向您提交了一个带有固定代码的拉取请求

检查答案将解决您的问题problem@KastriotDreshaj嘿，谢谢你的回复。我已经根据共享链接编辑了代码。帮我看看。它仍然不起作用。单击后，什么也没有发生。

'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;