react-native textInput 不刷新render清理表单

利用自带的clear()方法

ref={input => { this.passwordClear = input}}
// this.passwordClear 自定义方法

完整代码

import React from 'react';
import {
  StyleSheet,
  Text, TouchableHighlight,
  View,
  TextInput,
  Alert
} from 'react-native';
import CssConfig from "../config/CssConfig";
import {SearchBar} from "react-native-elements";
import FixScreen from "../common/FixScreen";
import Icon from 'react-native-vector-icons/Ionicons';

export default class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    }
  }

  onChangeUsername(text: string) {
    this.setState({
      username: text
    });
  }

  onChangePassword(text: string) {
    this.setState({
      password: text
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.loginTextInputBox}>
          <View style={styles.inputBox}>
            <TextInput
              value={this.state.username}
              placeholder={'邮箱/手机号/通行证登录'}
              style={styles.searchBarInputStyle}
              underlineColorAndroid='transparent'
              onChangeText={(Text) => this.onChangeUsername(Text)}
              ref={input => {
                this.usernameClear = input
              }}
            />

            <View style={{justifyContent: 'center', paddingTop: 5}}>
              <Icon
                onPress={() => this.usernameClear.clear()}
                name='ios-close'
                size={25}
                color={CssConfig.mainTextColor}
              />
            </View>
          </View>
          <View style={styles.inputBox}>
            <TextInput
              value={this.state.password}
              placeholder={'邮箱/手机号/通行证登录'}
              style={styles.searchBarInputStyle}
              underlineColorAndroid='transparent'
              onChangeText={(Text) => this.onChangePassword(Text)}
              ref={input => {
                this.passwordClear = input
              }}
            />

            <View style={{justifyContent: 'center', paddingTop: 5}}>
              <Icon
                onPress={() => this.passwordClear.clear()}
                name='ios-close'
                size={25}
                color={CssConfig.mainTextColor}
              />
            </View>
          </View>
          <View style={styles.loginTextBox}>
            <Text>找回密码</Text>
            <Text>注册账户</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: CssConfig.mainBackgroundColor,
  },
  loginTextBox: {
    marginTop: 30,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  loginTextInputBox: {
    flex: 1,
    padding: 40,
    justifyContent: 'center'
  },
  searchBarInputStyle: {
    fontSize: 14,
    height: 50,
    color: "#000",
    flex: 1
  },
  searchBarUnderlineColorAndroid: {
    color: CssConfig.mainBackgroundColor
  },
  inputBox: {
    backgroundColor: CssConfig.mainBackgroundColor,
    borderWidth: 1,
    borderColor: CssConfig.mainBorderColor,
    height: 50,
    borderRadius: 5,
    paddingLeft: 10,
    marginBottom: 20,
    paddingRight: 15,
    flexDirection: 'row',
  }

});