预填充React Native中的字段

constructor(props) {
  super(props);
  this.state = {
    username: 'John',
    email: 'john@example.com',
  };
}

render() {
  return (
    <View>
      <TextInput
        value={this.state.username}
        onChangeText={(text) => this.setState({ username: text })}
      />
      <TextInput
        value={this.state.email}
        onChangeText={(text) => this.setState({ email: text })}
      />
    </View>
  );
}

// 父组件
render() {
  return (
    <ChildComponent
      username="John"
      email="john@example.com"
    />
  );
}

// 子组件
render() {
  return (
    <View>
      <TextInput
        value={this.props.username}
        onChangeText={(text) => {/* 处理输入逻辑 */}}
      />
      <TextInput
        value={this.props.email}
        onChangeText={(text) => {/* 处理输入逻辑 */}}
      />
    </View>
  );
}

// 存储预填充字段
AsyncStorage.setItem('username', 'John');
AsyncStorage.setItem('email', 'john@example.com');

// 获取预填充字段并绑定到输入组件
componentDidMount() {
  AsyncStorage.getItem('username').then((value) => {
    this.setState({ username: value });
  });
  AsyncStorage.getItem('email').then((value) => {
    this.setState({ email: value });
  });
}

render() {
  return (
    <View>
      <TextInput
        value={this.state.username}
        onChangeText={(text) => this.setState({ username: text })}
      />
      <TextInput
        value={this.state.email}
        onChangeText={(text) => this.setState({ email: text })}
      />
    </View>
  );
}