先看效果图
Tab有2个标签页，分别为home setting；
- 由home，可以导航到detail，再导航到myFirstPage，当然可以正常返回，可以配置导航条样式等；
- 由setting，可以进入到myFirstPage
navigator_super.gif
再看代码导航结构（所以有Screen都在Stack导航下，包Tab Navigator也在Stack导航下同，这样就可以全局导航）
image.png
app.js文件里面的代码如下
image.png
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Button, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import MyHomeStackScreen from './lib/hom_stack/home_stack_screen'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MyDetailScreen from './lib/detail_screen'
import MyFirstScreen from './lib/my_first_screen'
const Stack = createNativeStackNavigator();
// create a component
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Home" component={MyHomeStackScreen} />
<Stack.Screen name="Detail" component={MyDetailScreen} options={{
headerShown: true
}} />
<Stack.Screen name="First" component={MyFirstScreen} options={{ //配置导航器内的各个屏幕
title: 'My First', //名称
headerShown: true,//是否显示名称
headerTitle: <View><Text>标题</Text></View>,//自定义导航栏名称内容
headerTitleAlign: "left",//对齐标题。可选择left或center。默认为iOS-center和Android-left
headerTitleAllowFontScaling: false,//标头标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为false
headerBackAllowFontScaling: false,//后退按钮标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为false。
//headerBackImage: <Image source={require('xx.png')}></Image>,//在标题的后退按钮中显示自定义图像
headerBackTitle: "返回",//iOS上的后退按钮使用的标题字符串。默认为上一个场景的headerTitle。
headerBackTitleVisible: true,//为后退按钮标题是否可见提供了一个合理的默认值，但是如果您想覆盖它，则可以使用true或false在此选项中使用
headerRight: () => (<TouchableOpacity onPress={() => console.log("save")}>
<View><Text>保存</Text></View>
</TouchableOpacity>),
//headerLeft: () => (<View><Text>标题左侧自定义内容</Text></View>),
headerTitleStyle: { backgroundColor: 'orange', color: 'red' },//标题的样式对象
// headerTitleStyle
// headerBackTitleStyle
// headerLeftContainerStyle
// headerRightContainerStyle
}} />
</Stack.Navigator>
</NavigationContainer>
);
};
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#e8e8e8',
},
});
//make this component available to the app
export default App;
Tab.Navigator里面代码如下：
image.png
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MyHomeScreen from '../home_screen'
import MySettingScreen from '../setting_screen'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
// create a component
const HomeStackScreen = () => {
return (
<Tab.Navigator >
<Tab.Screen name="Home" component={MyHomeScreen} />
<Tab.Screen name="Setting" component={MySettingScreen} />
</Tab.Navigator>
);
};
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2c3e50',
},
});
//make this component available to the app
export default HomeStackScreen;
其他的一些基础Screen，用于测试导航
// create a component
const HomeScreen = ({ navigation }) => {
goToDetailScreen = () => {
navigation.navigate('Detail')
}
return (
<View style={styles.container}>
<Text>HomeScreen</Text>
<Button title='to detail screen' onPress={goToDetailScreen}></Button>
</View>
);
};
// create a component
const DetailScreen = ({ navigation }) => {
goBackToHomeScreen = () => {
navigation.goBack()
}
goBackToFirstScreen = () => {
navigation.navigate('First')
}
return (
<View style={styles.container}>
<Text>DetailScreen</Text>
<Button title='back to home screen' onPress={goBackToHomeScreen}></Button>
<Button title='go to first screen' onPress={goBackToFirstScreen}></Button>
</View>
);
};
// create a component
class MyFirstScreen extends React.Component {
constructor(props) {
super(props)
this.state = {
myText: 'mo ren'
}
}
pressBtnClick = () => {
Alert.alert("pressed me")
console.log("butpressBtnClickton", this)
// 把你想要传递的数据放在params对象中
this.props.navigation.setParams({ data: 'some data' });
this.setState({
myText: 'haha'
});
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}
//仅安卓手机可以用
handleBackPress = () => {
Alert.alert("返回")
console.log("-----")
// 在这里写你的逻辑
return true; // 返回true表示拦截后退事件
}
render() {
return (
<View style={styles.container}>
<Text >MyFirstPage</Text>
<Text style={[styles.text, { color: 'blue' }]}>MyFirstPage</Text>
<Text>MyFirstPage</Text>
<Button title='tap me' onPress={() => {
console.log('tap me button')
// Alert.alert("tap me")
this.props.navigation.popToTop()
}}
></Button>
<Button title={this.state.myText} onPress={this.pressBtnClick}></Button>
</View>
);
}
}
// create a component
const SettingScreen = ({ navigation }) => {
goToFirstScreen = () => {
navigation.navigate('First')
}
return (
<View style={styles.container}>
<Text>SettingScreen</Text>
<Button title='to first screen' onPress={goToFirstScreen}></Button>
</View>
);
};
结尾
这样一个移动端app的，基础导航框架就完成了，今天RN 的分享就到这里喽，小伴们,觉得有点用的话，或者已经看到这里面来的请点个赞加关注吧~~ 后续分享更多有关RN Flutter和移动端原生开发相关的文章。欢迎在下面留言交流。
