我是 React Native 的新手，我只是不明白 react-navigation 是如何工作的。我已经花了多个工作日并尝试了不同的变体，但我什至没有从https://reactnavigation.org/docs/intro/获取示例来工作。
我的项目是用 来创建的create-react-native-app AwesomeProject，就像React Native Docs上描述的那样。
所以我回到了我的最后一个工作点（没有路由）。
这是我的文件结构：
root
- src
- - screens
- - - LoginScreen.js
- - - HomeScreen.js
- App.js
在我的 App.js 中，我只是执行一个简单的调用：
import LoginScreen from './src/screens/LoginScreen';
export default LoginScreen;
这是我的 LoginScreen.js 的简化版本：
import React from 'react';
import {
StyleSheet,
Text,
View,
AppRegistry,
Button,
ReactNative,
} from 'react-native';
/**
* Actual View
*/
class LoginScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
// some values
}
}
render() {
return (
<View style={[styles.containerOne]}>/>
// Some Input fields
<Button
onPress={this.loginButtonOnPress.bind(this)}
title="Login"
style={[styles.loginButton]}
/>
</View>
);
}
loginButtonOnPress() {
// Validation with fetch
}
}
export default LoginScreen;
/**
* Style
*/
const styles = StyleSheet.create({
containerOne: {
marginTop: -160,
justifyContent: 'center',
flex: 1,
alignItems: 'center',
}
loginButton: {
color: 'blue',
marginTop: 10,
}
});
LoginScreen.js 应该是第一个显示的页面。我想在调用 loginbuttonOnPress 时加载我的 HomeScreen.js 文件。我该怎么做？我已经找到了类似的东西
const SimpleApp = StackNavigator({
Login: { screen: LoginScreen },
Home: { screen: HomeScreen },
});
但我也没有得到这个工作。
我很感激我能得到的每一个帮助。
按登录按钮，然后转到主屏幕。
render() {
return (
<View style={[styles.containerOne]}>/>
// Some Input fields
<Button
onPress={() => navigation.navigate('Home'))}
title="Login"
style={[styles.loginButton]}
/>
</View>
);
}
你可以试试看
应用程序.js
const SimpleApp = StackNavigator({
Login: { screen: LoginScreen },
Home: { screen: HomeScreen },
},{ swipeEnabled: false }
);
export default SimpleApp
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句