反應本機 <TextInput> 在Android上隱藏文本onBlur

Question

在我的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

Answer 1

不要在該狀態下存儲樣式。 只需在狀態中標記即可。 然后在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} 。