React-Native不同屏幕之间基本路由跳转

2021-05-27 14:01:20 阅读：188 来源： 互联网

标签：react Detail React StyleSheet 跳转 import Home navigation Native

App.js：

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'

import Home from './pages/Home'
import Detail from './pages/Detail'

const Stack = createStackNavigator();

export default function App() {
  return (
   <NavigationContainer>
     <Stack.Navigator>
       <Stack.Screen name="Home" component={Home} options={{title:'这是Home页面'}}></Stack.Screen>
       <Stack.Screen name="Detail" component={Detail} options={{title:'这是Detail页面'}}></Stack.Screen>
     </Stack.Navigator>
   </NavigationContainer>
  )
}

const styles = StyleSheet.create({})


Home.js:

import React from 'react'
import { StyleSheet, Text, View,Button} from 'react-native'

export default function Home({navigation}) {
  return (
    <View>
      <Text style={styles.Title}>Home</Text>
     <View style={styles.Btn}>
     <Button  title="点击到Detail页面" onPress={()=>{navigation.navigate('Detail')}}></Button>
     </View>
    </View>
  )
}

const styles = StyleSheet.create({
  Btn:{
    marginTop:20,
    width:300,
    height:40,
    left:"10%"
  },
  Title:{
    color:'red',
    fontSize:28,
    textAlign:'center'
  }
})

Detail.js:

import React from 'react';
import {StyleSheet, Text, View,Button} from 'react-native';

export default function Detail({navigation}) {
  return (
    <View>
      <Text style={styles.Title}>Detail</Text>
      <View style={styles.Btn}>
        <Button
          title="点击到Home页面"
          onPress={() => {
            navigation.navigate('Home');
          }}></Button>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  Btn: {
    marginTop: 20,
    width: 300,
    height: 40,
    left: '10%',
  },
  Title: {
    color: 'red',
    fontSize: 28,
    textAlign: 'center',
  },
});

标签：react,Detail,React,StyleSheet,跳转,import,Home,navigation,Native
来源： https://www.cnblogs.com/sunyan97/p/14817591.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React-Native不同屏幕之间基本路由跳转