在 React Native Paper 中更改 TextInput 的文本颜色

Adr*_*mew 11 react-native react-native-paper

如何在 React Native Paper 中更改 TextInput 的文本颜色而不用在 PaperProvider 中换行?

目前这有效:

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    text: "orange",
  }
};

<PaperProvider theme={theme}>
  <TargetComponent />
</PaperProvider>
Run Code Online (Sandbox Code Playgroud)

但是我想通过从父组件传递的道具来控制文本颜色。奇怪的是,传球backgroundColor有效但color无效。

去除PaperProvider包装也无济于事。

这是 TargetComponent 中的相关代码:

return (
    <View style={styles.container}>
      <TextInput
        type="outlined"
        style={this.props.style}
        onChangeText={this.props.onChange}
        label={this.props.label}
        value={this.props.value || "Replace this text"}
        placeholder={this.props.placeholder}
      />
    </View>
)
Run Code Online (Sandbox Code Playgroud)

this.props.style 是:

{
    color: "orange", // This does not work
    backgroundColor: "transparent" // This works
},
Run Code Online (Sandbox Code Playgroud)

Adr*_*mew 27

找到了解决办法。但对于那些处于同样困境的人:

出于某种原因,即使其他人(如)是道具,也color不会被视为style道具backgroundColor

只需将其theme作为道具传递给TextInput. 在该theme对象中,像这样分配文本颜色:

      <TextInput
        type="outlined"
        style={{ ...styles.textInput, ...this.props.style }}
        underlineColor={this.theme.colors.primary}
        onChangeText={this.props.onChange}
        label={this.props.label}
        value={this.props.value || "Replace this text"}
        placeholder={this.props.placeholder}
        theme={{ colors: { text: this.props.style.color } }}
      />
Run Code Online (Sandbox Code Playgroud)

  • 如果我只想更改标签文本颜色怎么办?有什么解决办法吗?谢谢 (4认同)
  • @GabrielAugusto您可以将组件传递给 &lt;TextInput /&gt; 中的 label 属性,这意味着您可以拥有自定义组件并为其提供您想要的任何样式。`&lt;TextInput label={&lt;Text style={{color: "#someColor"}}&gt;{someText}&lt;/Text&gt;} /&gt;` (2认同)

Yas*_*ria 21

theme={{
         colors: {
                    placeholder: 'white', text: 'white', primary: 'white',
                    underlineColor: 'transparent', background: '#003489'
            }
      }}
Run Code Online (Sandbox Code Playgroud)