【问题标题】：React Native change view onPressReact Native 改变视图 onPress
【发布时间】：2018-07-30 01:41:17
【问题描述】：

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

当我点击“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>
        );
    }
}


});

【问题讨论】：

您能澄清一下您的具体错误和问题是什么，以及到目前为止您为解决它所做的努力吗？另外，请改进问题的语法和格式以提高可读性。谢谢:)

标签： react-native view onpress

【解决方案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 中遇到了一些错误，但 yarn 没有问题。

【讨论】：

【解决方案2】：

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

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

【讨论】：