首页 文章

React Native <TextInput>隐藏文本onBlur for Android

提问于
浏览 次
0

在我的React Native应用程序中，我有一个我希望在聚焦时添加样式（将textAlign从'center'更改为'left'） . 它在iOS中运行良好，但似乎在Android上，从onBlur回调更新TextInput的样式道具使TextInput的文本消失 .

这是我的代码：

import React, { Component } from 'react';
import { Text, TextInput, KeyboardAvoidingView, StyleSheet } from 'react-native';

export default class App extends Component {
  constructor () {
    super()
    this.state = {
      inputText: '',
      inputStyle: {},
      inputStyleOnFocus: styles.input_focused
    }
  }
  onFocusInput = () => {
    this.setState({inputStyle: this.state.inputStyleOnFocus})
  }
  onBlurInput = () => {
    this.setState({inputStyle: {}})
  }
  render() {
    return (
      <KeyboardAvoidingView style={styles.container} behavior='padding'>
        <Text style={styles.text}>Text from input: { this.state.inputText }</Text>
        <TextInput
          style={[styles.input, this.state.inputStyle]}
          placeholder='Type something'
          onChangeText={(text) => this.setState({inputText: text})}
          onFocus={this.onFocusInput}
          onBlur={this.onBlurInput}
        />
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    flex: 1,
    height: 40,
    marginTop: 100
  },
  input: {
    flex: 1,
    textAlign: 'center',
    minWidth: 200
  },
  input_focused: {
    textAlign: 'left'
  }
});

这里是世博小吃的链接：https://snack.expo.io/@timathis/textinput-onblur-hides-text-for-android

android react-native

1 回答

  • 0

    不要在州内存放风格 . 只要在该州有一面旗帜 . 在render方法中，根据标志的值应用样式 .

    编辑

    试试这段代码：

    import React, { Component } from 'react';
import { Text, TextInput, KeyboardAvoidingView, StyleSheet } from 'react-native';

export default class App extends Component {
  constructor () {
    super()
    this.state = {
      inputText: '',
      applyAditionalStyles: false,
    }
  }
  onFocusInput = () => {
    this.setState({applyAditionalStyles: true})
  }
  onBlurInput = () => {
    this.setState({applyAditionalStyles: false})
  }
  render() {
    const { applyAditionalStyles, inputText } = this.state; 
    return (
      <KeyboardAvoidingView style={styles.container} behavior='padding'>
        <Text style={styles.text}>Text from input: { inputText }</Text>
        <TextInput
          style={[styles.input, applyAditionalStyles && styles.input_focused]}
          placeholder='Type something'
          onChangeText={(text) => this.setState({inputText: text})}
          onFocus={this.onFocusInput}
          onBlur={this.onBlurInput}
          value={inputText}
        />
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    flex: 1,
    height: 40,
    marginTop: 100
  },
  input: {
    flex: 1,
    textAlign: 'center',
    minWidth: 200
  },
  input_focused: {
    textAlign: 'left'
  }
});

    您缺少的只是 TextInput 组件中的 value={inputText} .

    回复于

相关问题