React Native 外部样式 Sheet 未更新组件

Question

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

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}
    />
  );

Answer 1

你的 export/imports 令人困惑。你可以在索引

索引

export * from './GoogleInputStyle'

然后将它们导入到要使用它们的组件中，始终作为命名导入

HomeScreen.js

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

React Native 外部样式 Sheet 未更新组件

React Native External Style Sheet not updating component

css

reactjs

react-native

react-redux