[Nativebase输入字段在更改焦点时更改样式

Question

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

现在，我希望所有的textinput元素和picker元素在onFocus时都使用不同的样式，如下所示：

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

这种方法不好，当一个屏幕中有很多输入字段都需要一个自己的onFocus状态变量时，它会变得非常麻烦。但是，当然，我希望在可能的情况下将其构建在Input组件中，但我不知道如何实现。在弹出的组件中，只有我可以修改的样式。如何添加类似onFocus属性的内容？

[编辑]

而且我还发现，我实际上需要更改<Input>父级<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>