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)
Yas*_*ria 21
theme={{
colors: {
placeholder: 'white', text: 'white', primary: 'white',
underlineColor: 'transparent', background: '#003489'
}
}}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
18387 次 |
| 最近记录: |