react-native - React Native 改变视图 onPress

Question

我在谷歌上搜索过，但我不知道反应。

当我单击“Connexion”按钮时，我想被转发到 About.js 页面。

我的 app.js ：

import React from 'react';
import {View, TextInput, StyleSheet, Text } from 'react-native';
import { Header, Button } from 'react-native-elements';
import About from './component/About';
export default class App extends React.Component {

  render() {
    return (
        <View style={{flex: 1}}>
           
            <Button
                title="CONNEXION"
                buttonStyle={{backgroundColor: "#F1C40F", borderColor: "transparent", marginTop: 20,}}
            />
            
        </View>
    );
  }

}

   

我的 About.js

import React from 'react';
import {Text, View, StyleSheet } from 'react-native';
export default class About extends React.Component{
    render() {
        return (

            <View style={style.view}>
                <Text style={style.title}> A propos de moi</Text>
                
            </View>
        );
    }
}


});

Answer 1

1. 安装反应导航，

纱线添加反应导航

或使用 npm

npm install --save 反应导航

2. 在你的 index.js 中，导入 StackNavigator

   import App from './components/app; import About1 from './components/About; import {StackNavigator} from 'react-navigation';

3. 然后将以下代码添加到 index.js 的最后

   export default StackNavigator({ Home: {

   screen: App,

   },

   Aboutsss:{ screen: About1, },

});

4. 在 app.js 里面，里面的按钮给，

   onPress = {this.props.navigation.navigate('Aboutsss')}

希望您理解，如果有任何疑问，请随时发表评论。注意：- 当我尝试使用 npm 安装时，我在 windows 中遇到了一些错误，但 yarn 没有问题。

Answer 2

要在屏幕之间导航，您可以使用 stackNavigator。

https://facebook.github.io/react-native/docs/navigation.html