React native 在制表符左边进行本机制表符重置
我正在使用react导航开发react本机选项卡应用程序 我有两个选项卡,React native 在制表符左边进行本机制表符重置,react-native,react-router,react-navigation,react-native-ios,react-native-flatlist,React Native,React Router,React Navigation,React Native Ios,React Native Flatlist,我正在使用react导航开发react本机选项卡应用程序 我有两个选项卡,主屏幕和设置屏幕和一个详细屏幕 在tab主屏幕上,我有 钮扣 当用户单击按钮时,将进入详细信息屏幕 现在,如果用户从底部选项卡单击设置屏幕选项卡并返回到主屏幕选项卡,屏幕详细信息屏幕仍处于活动状态 以下是代码: import React from 'react'; import { Text, View,Button } from 'react-native'; import { createBottomTabNaviga
主屏幕
和设置屏幕
和一个详细屏幕
在tab主屏幕上,我有
设置屏幕
选项卡并返回到主屏幕
选项卡,屏幕详细信息屏幕
仍处于活动状态
以下是代码:
import React from 'react';
import { Text, View,Button } from 'react-native';
import { createBottomTabNavigator,
createStackNavigator} from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Details!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
});
const SettingsStack = createStackNavigator({
Settings: SettingsScreen
});
export default createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack,
}
);
从“React”导入React;
从“react native”导入{文本、视图、按钮};
导入{CreateBoottomTabNavigator,
createStackNavigator}来自“反应导航”;
类主屏幕扩展了React.Component{
render(){
返回(
回家!
this.props.navigation.navigate('Details')}
/>
);
}
}
类DetailsScreen扩展了React.Component{
render(){
返回(
细节!
);
}
}
类设置屏幕扩展React.Component{
render(){
返回(
设置!
);
}
}
const HomeStack=createStackNavigator({
主页:主屏幕,
详情:详情屏幕,
});
const SettingsStack=createStackNavigator({
设置:设置屏幕
});
导出默认CreateBoottomTabNavigator(
{
家:家装,
设置:设置策略,
}
);
当用户从选项卡设置屏幕
返回到主屏幕
时,他们将看到带有按钮的主屏幕,而不是详细屏幕