Question

我正在使用nativebase，将其弹出到项目中并添加了自定义主题。

现在，我希望所有的textinput元素和picker元素在onFocus时都使用不同的borderColor。像这样：


 <Item regular 
  onFocus={() => {
   this.setState({ onFocus: true });
  }}
  style={onFocus? { color: theme.onFocusInput} : { color: theme.default}}
   <Input/>
</Item>

但是，由于<Item>组件中没有onFocus属性，因此该方法不起作用。另外，我不想在我使用输入元素的每个屏幕中都定义它。这应该在我的nativebase组件（通常是Item.js）中定义的某个地方。

我不确定是否可以编写扩展了<Item>的自定义组件，并在仍具有正确主题的同时使用它。但这仍然不能解决<Item>仍然没有onFocus属性的问题。

Answer 1

尝试

<Item regular style={{ borderRadius: 10, marginBottom: 10 }}>
   <Input
        onFocus={() => {
        this.setState({ onFocus: true });
        }}
        onBlur={() => {
        this.setState({ onFocus: false});
        }}
        style={{ color: this.state.onFocus ? theme.onFocusInput : theme.default}}
    />
</Item>

或者您可以简单地通过create method在backgroundColor或input设置focus时将blur设置为style。喜欢

const focused = () => {
  this.setState({ backgroundcolor: "" })
}

const blured = () => {
 this.setState({ backgroundcolor: "" })
}

 <Item regular style={{ borderRadius: 10, marginBottom: 10 }}>
    <Input
       onFocus={this.focused}
       onBlur={this.blured}
       style={{ color: this.state.backgroundcolor }}
     />
 </Item>

重点突出时更改nativebase输入字段的样式

1 个答案: