React Native 外部样式表不更新组件

Posted 2023-02-16

【中文标题】React Native 外部样式表不更新组件

【英文标题】：React Native External Style Sheet not updating component

【发布时间】：2021-12-14 23:57:36

【问题描述】：

我在 React Native 中为我的组件创建了一个外部样式表。我有一个“index.js”文件，我将所有样式从他们的“.js”文件导入到其中。一旦我连接所有内容并将“index.js”文件导入到我的组件中，该组件似乎不会根据我设置的样式进行更新。我附上了用于制作外部样式表的每个“.js”文件的 sn-ps。

index.js

import * as GoogleInputBox from './GoogleInputStyle'
export  GoogleInputBox 

GoogleInputStyle.js

import  StyleSheet  from "react-native";

const GoogleInputBox = StyleSheet.create(
  container: 
    backgroundColor: "white",
    paddingTop: 5,
    flex: 0,
  ,
  textInput: 
    borderRadius: 0,
    fontSize: 16,
    height: 50,
  ,
  textInputContainer: 
    paddingHorizontal: 20,
    paddingBottom: 0,
  ,
);

export  GoogleInputBox ;

HomeScreen.js

import GoogleInputBox from "../Styles";

...
    <GooglePlacesAutocomplete
      placeholder="Where to?"
      styles=GoogleInputBox <= Component Style Input
      nearbyPlacesAPI="GooglePlacesSearch"
      enablePoweredByContainer=false
      minLength=2
      fetchDetails=true
      textInputProps=
        placeholderTextColor: "black",
        returnKeyType: "search",
      
      onPress=(data, details = null) => 
        dispatch(
          setOrigin(
            location: details.geometry.location,
            description: data.description,
          )
        );
        dispatch(setDestination(null));
      
      query=
        key: API_TOKEN,
        language: "en",
      
      debounce=400
    />
  );

【参考方案1】：

您的导出/导入令人困惑。 您可以在索引中re-export all named exports

索引

export * from './GoogleInputStyle'

然后将它们导入到您要使用它们的组件中，始终以命名导入的形式导入

HomeScreen.js

import  GoogleInputBox  from "../Styles";