我是本机反应的新手,但遇到以下无法自我发现的问题:
我正在尝试在底部选项卡组件下面更改一个组件。单击选项卡之一后,下面的组件应更改。但是,当我单击其中一个选项卡时,屏幕内容不会更改。我究竟做错了什么? 此外,我已经在应用程序中有了第二个NavigationContainer。这就是为什么我将标志设置为独立于{true}的原因。
正如在受攻击的package.json文件中看到的那样,我将react-native与expo和react-navigation5一起使用。
Wardrobe.js:
const App = () => {
return (
<ScrollView>
<Text>Just for testing purpose 1</Text>
<AvatarItemPickerMain/>
<Text>Just for testing purpose 2</Text>
<Text>Change this component when clicking on tab.</Text>
</ScrollView>
)};
export default App;
AvatarPickerMain.js:
const AvatarItemPickerMain = () => {
return (
<NavigationContainer independent={true}>
<MainTabScreen ></MainTabScreen>
</NavigationContainer>
);
}
export default AvatarItemPickerMain;
MainTabScreen.js:
import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
import ExploreScreen from './ExploreScreen';
import ProfileScreen from './ProfileScreen';
const HomeStack = createStackNavigator();
const DetailsStack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
const MainTabScreen = () => (
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
>
<Tab.Screen
name="Notifications"
component={DetailsStackScreen}
options={{
tabBarLabel: '-->DetailsScreen<--',
tabBarColor: '#1f65ff',
tabBarIcon: ({ color }) => (
<Icon name="ios-notifications" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileStackScreen}
options={{
tabBarLabel: '-->Profile<--',
tabBarColor: '#1f65ff',
tabBarIcon: ({ color }) => (
<Icon name="ios-notifications" color={color} size={26} />
),
}}
/>
// some more screens are here
</Tab.Navigator>
);
export default MainTabScreen;
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<HomeStack.Screen name="Home" component={HomeScreen} options={{
title:'Overview'}} />
</HomeStack.Navigator>
);
const DetailsStackScreen = ({navigation}) => (
<DetailsStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#1f65ff',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<DetailsStack.Screen name="Details" component={DetailsScreen} options={{
}} />
</DetailsStack.Navigator>
);
DetailsScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const DetailsScreen = ({navigation}) => {
return (
<View style={styles.container}>
<DisplaySomeComponent> TODO </DisplaySomeComponent>
<Text>Details Screen</Text>
</View>
);
};
export default DetailsScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
});
package.json:
{
"dependencies": {
"@react-native-community/masked-view": "0.1.5",
"@react-navigation/drawer": "^5.4.0",
"@react-navigation/native": "^5.1.1",
"@react-navigation/stack": "^5.2.3",
"@react-navigation/material-bottom-tabs": "^5.1.6",
"react-native-paper": "^3.6.0",
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-action-button": "^2.8.5",
"react-native-gesture-handler": "^1.6.0",
"react-native-material-ui": "^1.30.1",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.0.0-beta.8",
"react-native-super-grid": "^3.1.2",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"styled-components": "^5.0.1"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"@babel/core": "^7.0.0"
},
"private": true
}