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

7cjasjjr 于 2022-11-25 发布在 React

关注(0)|答案(4)|浏览(181)

如何在React Native Paper中更改TextInput的文本颜色而不在PaperProvider中换行？
目前这是可行的：

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

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

然而，我想通过从父组件传递的属性来控制文本颜色。奇怪的是，传递backgroundColor可以工作，但color不行。
去掉PaperProvider的 Package 也无济于事。
下面是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
},

react-native

来源：https://stackoverflow.com/questions/55958311/change-text-color-of-textinput-in-react-native-paper

4条答案

按热度按时间

wxclj1h51#

找到了一个解决办法。但对于那些处于同样困境的人：
由于某种原因，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}
  />

}

赞(0）回复(0）举报 2022-11-25

vpfxa7rd2#

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

赞(0）回复(0）举报 2022-11-25

bksxznpy3#

只需将该行theme={{colors: {text: 'Your Color' }}}添加到React原生纸张的<TextInput/>中。

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

赞(0）回复(0）举报 2022-11-25

xsuvu9jc4#

<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：{文字：'您的颜色' } }}

赞(0）回复(0）举报 2022-11-25

我来回答

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

4条答案

相关问题

热门标签

最新问答