React Native双屏幕样式互斥失效，切换时样式丢失求助

问题描述 #

在React Native开发中使用Stack Navigation时，出现两个屏幕样式互斥的问题：修改保存后，一个屏幕样式生效时，另一个屏幕的样式就会丢失。

相关代码 #

第一个屏幕样式代码

import { render } from 'react-dom';
import {NavigationContainer} from '@react-navigation/native'
import { TextInput } from 'react-native-gesture-handler';
const width = Dimensions.get('window').width
const heigth = Dimensions.get('window').height
styles = StyleSheet.create({
    Container:{
        flex:1,
        width: '100%',
        width: width -20,
        height:heigth - 10,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    ViewContainer:{
      width: width -40,
      flex:1,
      alignItems: 'center',
      backgroundColor: '#F5FCFF'
    },
    input:{
      borderBottomColor: '#F5FCFF',
      backgroundColor: '#FFFFFF',
      borderRadius:30,
      borderBottomWidth: 1,
      paddingLeft: 8,
      width:250,
      height:45,
      marginBottom:8,
      marginTop:20,
      flexDirection: 'row',
      alignItems:'center',
      marginLeft:40
  },
    Button:{
      width:"80px",
      height:"30px",
      margin:100,
      justifyContent:'flex-end',
      alignItems: "flex-end",
    },
    buttonContainer: {
      height:65,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom:20,
      width:250,
      borderRadius:30,
      marginLeft:70
    },
    Container:{
      flex:1,
      justifyContent:"flex-end",
      alignItems: "flex-end",
    },
})

第二个屏幕样式代码

import AsyncStorage from '@react-native-async-storage/async-storage';
import { render } from 'react-dom';
import {NavigationContainer} from '@react-navigation/native'
import { TextInput } from 'react-native-gesture-handler';
import { getPermissionsAsync } from 'expo-location';
const width = Dimensions.get('window').width
const heigth = Dimensions.get('window').height


styles = StyleSheet.create({
    Container:{
        flex:1,
        width: width -20,
        height:heigth-30,
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    input:{
        marginTop: heigth/4,
        margin: 20,
        borderBottomColor: '#F5FCFF',
        backgroundColor: '#FFFFFF',
        borderRadius:30,
        borderBottomWidth: 1,
        width:250,
        height:45,
        marginBottom:20,
        flexDirection: 'row',
        alignItems:'center',
        marginLeft:70
      
    },
    Button:{
      height:45,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom:20,
        width:250,
        borderRadius:60,
        borderBottomWidth: 1,
        marginTop:90,
        marginLeft:70
    },
    Button2:{
      flex:1,
      height:20,
      borderRadius:60,
      borderBottomWidth: 1,
      width:30,
      color:'#f0f8ff',
      alignSelf:'flex-end',
      borderStyle: 'dashed'
    }
})

导航相关代码

function Tabnav() {
  return(
   <Tab.Navigator 
   screenOptions={{
    tabBarActiveTintColor: '#101010',
    TabBarLabelStyle: {
      fontSize: 15,
    },
    TabBarStyle: {
      backgroundColor: '#ffd700',
    }
  }}
 >
     <Tab.Screen name="Homescreen" component={Home} 
     options={{
      headerShown: false,
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="ios-home" color={color} size={size} />
      )
    }}/>

     <Tab.Screen name="Perfil" component={userProfile}
     options={{
      headerShown: false,
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="ios-person" size={size} color={color} />
      )
    }}/>
    
   </Tab.Navigator> 
    
  );
}

 export default function App(){
   

    return (
      
      <NavigationContainer initialRouteName="Signin">
        <Stack.Navigator>
          <Stack.Screen name="Signin" component={Signin} />
          <Stack.Screen name="Register" component={Register}/>
          <Stack.Screen name="Forgotpass" component={Forgotpass}/>
          <Stack.Screen name="Reset" component={Reset}/>
          <Stack.Screen name="Home" component={Tabnav} options={{headerLeft:()=>null, gestureEnabled: false,}}/>
          <Stack.Screen name="Dermatologistas" component={Dermatologistas}/>
          <Stack.Screen name="Hospitais" component={Hospitais}/>
          <Stack.Screen name="Cardiologista" component={Cardiologista}/>
          <Stack.Screen name="Pneumologista" component={Pneumologista}/>
          <Stack.Screen name="Odontologo" component={Odontologo}/>
          <Stack.Screen name="Oftalmologista" component={Oftalmologista}/>
          <Stack.Screen name="UserProfile" component={userProfile}/>
          <Stack.Screen name="Profile" component={Profile}/>
         
          <Stack.Screen name="Edit" component={Edit}/>
        </Stack.Navigator>
       
      </NavigationContainer>
          
     );
   }

问题根源分析 #

1. 全局变量污染：两个屏幕的样式都使用未声明的styles变量，默认成为全局变量。当第二个屏幕执行styles = StyleSheet.create(...)时，会直接覆盖第一个屏幕的styles，导致切换屏幕时，后加载的屏幕样式会覆盖全局样式，前一个屏幕的样式失效。
2. 单个样式对象重复键：第一个屏幕的样式中重复定义了Container属性，后定义的会覆盖前一个，导致自身样式逻辑混乱。

解决方案 #

1. 将styles声明为局部变量 #

在每个屏幕的样式代码中，用const声明styles，避免全局变量污染：

修改后第一个屏幕样式代码片段

import { StyleSheet, Dimensions } from 'react-native';
// 其他导入...
const width = Dimensions.get('window').width
const height = Dimensions.get('window').height // 修正拼写错误heigth→height

const styles = StyleSheet.create({
    Container:{
        flex:1,
        width: width -20,
        height: height - 10,
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        backgroundColor: '#F5FCFF'
    },
    // 其他样式属性...
})

修改后第二个屏幕样式代码片段

import { StyleSheet, Dimensions } from 'react-native';
// 其他导入...
const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

const styles = StyleSheet.create({
    Container:{
        flex:1,
        width: width -20,
        height: height -30,
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    // 其他样式属性...
})

2. 修复单个样式对象的重复键 #

删除第一个屏幕中重复的Container属性，合并需要的样式逻辑，避免自身样式被覆盖。

3. 保持组件样式独立性 #

每个屏幕组件的样式应该定义在组件内部或专属的样式文件中，避免跨模块的变量冲突，也可以将样式拆分为单独的.styles.js文件，通过导入使用。

内容的提问来源于stack exchange，提问作者Paulo Avila