React-Native 学习笔记1:安装环境（mac）：1：Node、Watchman、Xcode和CocoaPods

1:安装环境（mac）：

1：Node、Watchman、Xcode 和 CocoaPods。请参考：官方文档

2:配置react-navigation/native路由导航：

2.1 在项目文件下安装

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
{ios环境下需安装}
npx pod-install ios

2.2 安装完成之后在项目文件顶部index.js或者App.js中引入
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
2.3需要把整个应用用NavigationContainer包裹住

<NavigationContainer> <App /></NavigationContainer>

2.4 配置路由页面使用react-navigation/stack

{ 首先安装 }

npm install @react-navigation/stack

{ 安装完成之后，在App.js中引用}

import { createStackNavigator } from '@react-navigation/stack';

{ 创建堆栈导航器 }

const Stack = createStackNavigator();{ 之后在NavigationContainer组件 }

const App =()=>{    
return(
       <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">           
               <Stack.Screen name="Home" component={Home}></Stack.Screen>       
            </Stack.Navigator>       
        </NavigationContainer>
    )
}

Stack.Navigator组件接受的参数

initialRouteName起始页面

Stack.Screenname="页面名称" component={组件名}

2.5 切换路由于传递参数

创建两个页面组件

const Home =({navigation}) =>{   

    const detailsTap = ()=>{
        navigation.navigate("Details",{            {/* 页面的跳转路由 传递参数 */}
            itemId:20,

        });
    }
    return(
        <>
            <Button onPress={detailsTap.bind(this)}></Button>        </>
    )
}

Details组件可以接收Home组件传递过来的itemId值
const Details =({route,navigation}) =>{   

    cosnt { itemId } = route.parmas;
    return(
        <>
            <View>{itemId}</View>
        </>
    )
}