React-Native 加入小组
react-native-p: 基础框架搭建
import React from 'react';
import {StyleSheet, Button, Image, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
// import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {createStackNavigator} from '@react-navigation/stack';
/**
* With React Navigation 5.x, we can dynamically define and alter the screen definitions of a navigator,
* which makes Switch Navigator unnecessary. The above pattern can be now defined declaratively:
*
* SplashScreen - This will show a splash or loading screen when we're restoring the token.
* SignInScreen - This is the screen we show if the user isn't signed in already (we couldn't find a token).
* HomeScreen - This is the screen we show if the user is already signed in.
*
* Splash screen is only defined if isLoading is true
* SignIn screen is only defined if userToken is null
* Home screen is only defined if userToken is non-null
*
* 1 SplashScreen SignInScreen HomeScreen关系处理
* 2 栈页面跳转问题
* 3 HomeNavigator 通过栈导航到普通页面 PayScreen; 前提条件 放在一个栈 形式（<>栈</>）
* 4
* error:
* Looks like you have nested a 'NavigationContainer' inside another.
* Normally you need only one container at the root of the app
*/
class TopTabScreen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>TopTab Screen</Text>
</View>
);
}
}
const TabTop = createMaterialTopTabNavigator();
function TopNavigator() {
return (
<TabTop.Navigator
initialRouteName="Page1"
tabBarOptions={{
activeTintColor: 'blue',
inactiveTintColor: 'green',
scrollEnabled: true,
labelStyle: {fontSize: 15},
tabStyle: {
width: 130,
},
indicatorStyle: {
height: 6,
backgroundColor: 'blue',
},
style: {
backgroundColor: 'skyblue',
},
}}>
<TabTop.Screen name="Page1" component={TopTabScreen} />
<TabTop.Screen name="Page2" component={TopTabScreen} />
<TabTop.Screen name="Page3" component={TopTabScreen} />
<TabTop.Screen name="Page4" component={TopTabScreen} />
</TabTop.Navigator>
);
}
class Bottom1Screen extends React.Component {
render() {
return <TopNavigator />;
// return (
// {/* <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
// <Text>Page1 Screen</Text>
// <Button
// title="Pay"
// onPress={() => this.props.navigation.navigate('pay')}
// />
// </View> */}
// );
}
}
class Bottom2Screen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Bottom2 Screen</Text>
</View>
);
}
}
class Bottom3Screen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Bottom3 Screen</Text>
</View>
);
}
}
class Bottom4Screen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Bottom4 Screen</Text>
</View>
);
}
}
const Tab = createMaterialBottomTabNavigator();
// const Tab = createBottomTabNavigator();
function HomeNavigator() {
return (
<Tab.Navigator
initialRouteName="BottomTab1"
activeColor="#f0edf6"
inactiveColor="#eee"
barStyle={{backgroundColor: 'green'}}
labeled={true}>
<Tab.Screen
name="BottomTab1"
component={Bottom1Screen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({color, size}) => (
<Icon name="android" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="BottomTab2"
component={Bottom2Screen}
options={{
tabBarLabel: 'People',
tabBarIcon: ({color, size}) => (
<Icon name="accessibility" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="BottomTab3"
component={Bottom3Screen}
options={{
tabBarLabel: 'Bike',
tabBarIcon: ({color, size}) => (
<Icon name="directions-bike" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="BottomTab4"
component={Bottom4Screen}
options={{
tabBarLabel: 'Run',
tabBarIcon: ({color, size}) => (
<Icon name="directions-run" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
class LoginScreen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>LoginSceen</Text>
<Button
title="Regist"
onPress={() => this.props.navigation.navigate('regist')}
/>
<Button
title="Home"
onPress={() => this.props.navigation.navigate('home')}
/>
</View>
);
}
}
class RegistScreen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Regist Sceen</Text>
<Button
title="Login"
onPress={() => this.props.navigation.navigate('login')}
/>
</View>
);
}
}
class WelcomeScreen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>welcome Sceen</Text>
</View>
);
}
}
class PayScreen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Pay Sceen</Text>
</View>
);
}
}
const Stack = createStackNavigator();
class AppNavigator extends React.Component {
constructor(props) {
super(props);
console.disableYellowBox = true;
this.state = {
isLoading: false,
userToken: 'sssdfafasfgas',
};
}
render() {
return (
// NavigationContainer 只能有一个 包含所有组件
<NavigationContainer>
<Stack.Navigator>
{this.state.isLoading ? (
<Stack.Screen name="welcome" component={WelcomeScreen} />
) : this.state.userToken == null ? (
<>
<Stack.Screen name="login" component={LoginScreen} />
<Stack.Screen name="regist" component={RegistScreen} />
</>
) : (
<>
<Stack.Screen
name="home"
component={HomeNavigator}
options={{
headerShown: false,
}}
/>
<Stack.Screen name="pay" component={PayScreen} />
</>
)}
</Stack.Navigator>
</NavigationContainer>
);
}
}
export default AppNavigator;
