React Native 改变视图 onPress

Posted 2023-04-18

【中文标题】React Native 改变视图 onPress

【英文标题】：React Native change view 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>
        );
    



);

【问题讨论】：

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

【参考方案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