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

Question

如何在不包装在PaperProvider中的React Native Paper TextInput中更改文本颜色？

目前这个方法是可行的：

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

<PaperProvider theme={theme}>
  <TargetComponent />
</PaperProvider>

然而我希望通过从父组件传递的props控制文本颜色。奇怪的是，传递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>
)

this.props.style是：

{
    color: "orange", // This does not work
    backgroundColor: "transparent" // This works
},

- Adrian Bartholomew

Answer 1

找到了一个解决方案。但对于处于同样困境中的人:

由于某种原因，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 } }}
      />

已更新以适用于函数组件和 React Native Paper 5.x (此外，如果您想要标签颜色控制):

const MyFuncComponent = ({style, colors, onChange, label, value}) => {

  const Label = <Text color={style.labelColor}>{label}</Text>;

  <TextInput
    type="outlined"
    style={{ ...styles.textInput, ...style }}
    underlineColor={theme.colors.primary}
    onChangeText={onChange}
    label={Label}
    value={value || "Replace this text"}
    placeholder={placeholder}
    textColor={style.color}
  />

}

- Adrian Bartholomew

---

如果我只想更改标签文本的颜色，有解决方案吗？谢谢。 - Gabriel Augusto

而对于禁用状态呢？你是否需要像这样为其设置一个类似的 const customTextColor = editable === true ? 'black' : 'grey' 来将其作为主要文本颜色吗？ - pokumars

@GabrielAugusto 你可以将一个组件传递给<TextInput />的label属性，这意味着你可以拥有自定义组件并赋予它任何你想要的样式。 <TextInput label={<Text style={{color: "#someColor"}}>{someText}</Text>} /> - Amin Jafarlou

Answer 2

theme={{
         colors: {
                    placeholder: 'white', text: 'white', primary: 'white',
                    underlineColor: 'transparent', background: '#003489'
            }
      }}

- Yash Vekaria

---

这个不满足 - “我想通过传递的props来控制文本颜色”。 - Adrian Bartholomew

@AdrianBartholomew是否通过使用props获得了解决方案？对于相同的要求，我发布了一个新问题https://stackoverflow.com/questions/63052170/how-can-we-send-props-to-withstyles-react-js-meterial-textfield如果您找到了解决方案，请帮忙。 - Ashok Reddy Narra

Answer 3

在React Native Paper的<TextInput/>中，只需添加这一行代码 theme={{colors: {text: '你的颜色'}}}。

        <TextInput
            placeholder= {'Some Text'}
            theme={{
              colors: {
                    text: 'white',
                 }
           }}

- danklad

Answer 4

如果你想要改变lightTheme的默认背景颜色，你可以设置surfaceVariant: "white"。

通过这样做，所有的TextInput组件的背景颜色都会改变，不需要逐个修改每一个组件。我在深入研究实现细节后发现了这一点。

为了更清楚地理解，请阅读https://callstack.github.io/react-native-paper/docs/guides/theming上的主题文档。

   const lightTheme = {
      ...MD3LightTheme,
      colors: {
        ...MD3LightTheme.colors,
        surfaceVariant: "white",
      },
      roundness: 1.5,
    };

- Baryon Lee

Answer 5

<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}
    theme={{ colors: { text: 'white' } }}
  />

只需在主题中添加颜色——theme = {{ colors：{ text: 'your_color' }}}

- Rohit Maurya