React-Native Navigator Nie działa - javascript, android, react-native

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

}} /> }

Próbuję, żeby to zadziałało. Po kliknięciu przycisku logowania powinien przejść do głównej aktywności, więc LoginScreen.js onClick MainActivity.js

https://github.com/raja95shah/reactNative.git > Mój projekt na githubie, aby uzyskać więcej informacji. Proszę pomóż.

Odpowiedzi:

Właśnie spojrzałem na twój kod.Wygląda na to, że musisz ustawić swoją początkową trasę jako komponent nawigatora. Naprawiłem to i wklejam poniższy kod. Dwa pliki, które wymagają naprawy, to index.ios.js i 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;

Wysłałem również do Ciebie żądanie ściągnięcia ze stałym kodem.