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

【问题标题】：React Native External Style Sheet not updating componentReact Native 外部样式表不更新组件
【发布时间】：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}
    />
  );

【问题讨论】：

标签： css reactjs react-native react-redux

【解决方案1】：

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

索引

export * from './GoogleInputStyle'

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

HomeScreen.js

import { GoogleInputBox } from "../Styles";

【讨论】：