去年版本还是4、今年就5了~~!
import 'react-native-gesture-handler';
import React,{createContext, Component, useReducer} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppEntry from './src/AppEntry'
const App = () => {
const reducer = (state, action) => {
switch(action.type){
default:
return action
}
}
const [state,dispatch] = useReducer(reducer,{name:"张三",age:123})
return (
<AppEntry></AppEntry>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
AppEntry
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Text } from 'react-native';
import * as React from 'react';
import ceshi from './ceshi/ceshi'
import MainNavigator from './components/tabBar/MainNavigator'
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('ceshi',{name:"路由传值"})}
/>
</View>
);
}
const Stack = createStackNavigator();
function AppEntry() {
return (
//该NavigationContainer负责管理你的应用程序状态和您的顶级导航链接到应用环境
<NavigationContainer>
//initialRouteName设置默认导航页面
<Stack.Navigator initialRouteName="MainNavigator">
//设置所有路由到路径和页面
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="ceshi" component={ceshi}/>
//options设置导航标题
<Stack.Screen name="MainNavigator" component={MainNavigator} options={{ title: 'Overview' }}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default AppEntry;
ceshi.tsx
import React,{ useState, useEffect,useContext,createContext } from 'react';
import { StyleSheet, Text, View, Keyboard, Button } from 'react-native';
import {ValueContext} from './../context/ceshi'
const App = ({navigation,route}) => {
useEffect(()=> {
console.warn("========");
console.warn(navigation)
console.warn("========123");
//接收参数
console.warn(route)
}, [false]);
return (
<View>
<Text>asdasd</Text>
<Button
title="Go to HomeScreen"
onPress={() => navigation.navigate('HomeScreen')}
/>
</View>
)
}
export default App;
MainNavigator.tsx
import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
function IconWithBadge({ name, badgeCount, color, size }) {
return (
<View style={{ width: 24, height: 24, margin: 5 }}>
<Ionicons name={name} size={size} color={color} />
{badgeCount > 0 && (
<View
style={{
// On React Native < 0.57 overflow outside of parent will not work on Android, see https://git.io/fhLJ8
position: 'absolute',
right: -6,
top: -3,
backgroundColor: 'red',
borderRadius: 6,
width: 12,
height: 12,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
{badgeCount}
</Text>
</View>
)}
</View>
);
}
function HomeIconWithBadge(props) {
// You should pass down the badgeCount in some other ways like React Context API, Redux, MobX or event emitters.
return <IconWithBadge {...props} badgeCount={3} />;
}
function HomeScreen({navigation}) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>ceshi!</Text>
<Button
title="Go to ceshi"
onPress={() => navigation.navigate('ceshi')}
/>
</View>
);
}
function SettingsScreen({navigation}) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>HomeScreen!</Text>
<Button
title="Go to HomeScreen"
onPress={() => navigation.navigate('HomeScreen')}
/>
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
if (route.name === 'Home') {
return (
<HomeIconWithBadge
name={
focused
? 'ios-information-circle'
: 'ios-information-circle-outline'
}
size={size}
color={color}
/>
);
} else if (route.name === 'Settings') {
return (
<Ionicons
name={focused ? 'ios-list-box' : 'ios-list'}
size={size}
color={color}
/>
);
}
},
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}