Question

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

这是我的代码：

＆＃13;

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'
  }
});

＆＃13;

这里是世博小吃的链接： 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'
  }
});

您遗失的只是value={inputText}组件中的TextInput。

React Native <textinput>隐藏文字onBlur for Android

1 个答案: