纱线添加反应导航

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

安装react-navigation，

纱线添加反应导航

或使用npm

npm install --save react-navigation

在index.js中，导入StackNavigator

import App from './components/app; import About1 from './components/About; import {StackNavigator} from 'react-navigation';
然后将以下代码添加到index.js的最后一个

export default StackNavigator({ Home: {

screen: App,

},

Aboutsss:{ screen: About1, },

});

在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. +中，还有两个步骤可以在项目中安装React Navigation还有一些代码更改。

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

因此对于React Navigation 3。+

使用创建项目

react-native初始ProjectName
跳入项目

cd ProjectName
安装React导航

npm install react-navigation --save
安装react-native-gesture-handler

npm install react-native-gesture-handler --save
链接依赖项

本机链接

完成安装

现在在代码部分将您的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')};

React Native change view onPress

3 个答案:

纱线添加反应导航

npm install --save react-navigation