React Native change view 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. 安装反应导航，

yarn add react-navigation

或者与npm

npm install --save react-navigation

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中出现了一些错误，但纱线没问题。

Answer 2

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

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

Answer 3

我尝试了@Thomas M Kurialassery的解决方案，但它只适用于React Navigation版本2. +但是在React Navigation版本3的新版本中。+还有另外2个步骤在项目中安装React Navigation并进行一些更改在代码中也是。

根据官方发布，“它现在取决于react-native-gesture-handler。该库提供了一组出色的原语，用于利用操作系统的本机手势API，使我们能够解决堆栈和抽屉导航器的各种问题。“

所以对于React Navigation 3. +

1. 使用创建项目 react-native init ProjectName
2. 跳进项目 cd ProjectName
3. 安装React Navigation npm install react-navigation --save
4. 安装react-native-gesture-handler npm install react-native-gesture-handler --save
5. 链接依赖项 反应本地链接

安装完成

现在在代码部分将app.js文件复制到另一个文件中，因为我们要将app.js作为索引文件，并在其中设置StackNavigator。假设您已经创建了一个文件FirstPage。

在你的app.js里面

import FirstPage from './FirstPage;
import About from './About;
import {createStackNavigator,createAppContainer} from 'react-navigation';
const App = createStackNavigator(
  {
    FirstPage: { screen: FirstPage}, 
    About: { screen: About}, 
  },
  {
    initialRouteName: 'FirstPage',
  }
);
export default createAppContainer(App);

在FirstPage.js里面，里面的按钮给出，

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