React Native: Как установить <TextInput>и <Image>в центре вместе - PullRequest
Новая
       10

React Native: Как установить <TextInput>и <Image>в центре вместе

0 голосов
/ 27 декабря 2018

Я хочу, чтобы текст и изображение были в одной строке и центрированы.Как я могу отцентрировать его?

Я обновил свой код с другим требованием SearchBox будет центрироваться при запуске, а затем нажмите, чтобы начать ввод, будет оставлено поле (извините, ребята, мой английский такплохо). 

constructor(props: any) {
  super(props);
  this.state = {
    onEdit: false,
  }
  this.onBlur = this.onBlur.bind(this);
  this.onEndEditing = this.onEndEditing.bind(this);
}

private onBlur() {
  this.setState({
    onEdit: true
  });
}
private onEndEditing() {
  this.setState({
    onEdit: !this.state.onEdit
  });
}    

private get searchView() {
  const { onEdit } = this.state;
  return (
    <View style={styles.searchContainer}>
      <View style= {[styles.search, onEdit === true || this.props.keyword.length !== 0 ? undefined : { justifyContent: 'center' }]}>
        <Image source={searchIcon} style={[styles.image, { marginLeft: onEdit === true || this.props.keyword.length !== 0 ? 10 : 0 }]} />
        <TextInput
          style={styles.searchInput}
          placeholder={'search'}
          onEndEditing={this.onEndEditing}
          onFocus={this.onBlur}
          defaultValue={this.props.keyword}
          clearButtonMode="while-editing"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  searchContainer: {
    height: 72,
    padding: 16,
  },
  search: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    height: 40,
  },
  image: {
    marginRight: 10,
    alignSelf: 'center'
  },
  searchInput: {
    paddingRight: 10,
    fontSize: 14,
  },
})

Обновление: При вводе текста в поле поиска появляется новая ошибка.Это было скрыто для первых нескольких символов.

mA9fdE

1 Ответ

0 голосов
/ 27 декабря 2018

Вам нужно использовать flex вместо flexBox .

Вот и все: 

render() {
    return (
      <View style={styles.container}>
        <View style={styles.searchContainer}>
          <Image source={IC_PRIVATE_CLUB_NORMAL} style={styles.image} />
          <TextInput
            style={styles.searchInput}
            placeholder={'search'}
          />
        </View>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  searchContainer: {
    height: 72,
    width: '90%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'pink',
    flexDirection: 'row'

    // padding: 16,
    // paddingLeft: 10,
    // paddingRight: 10,
    // flex: 1,
  },
  search: {
    // width: '80%',
    flexDirection: 'row',
    alignItems: 'center',
    height: 60,
    backgroundColor: 'gray'
  },
  image: {
    marginRight: 10,
    alignSelf: 'center'
  },
  searchInput: {
    height: 40,
    width: '80%',
    fontSize: 14,
    textAlign: 'center',
    backgroundColor: 'red'
  },
})
...