позиционирование реагирующих элементов

Question

Следующий код работает, но интересно, действительно ли это лучший способ выполнить поставленную задачу.Два поля TextInput, когда show = true отображают оба из них.Когда show = false отображать первый на том же месте на экране и не отображать второй.Мы заменили пустой элемент Text, чтобы занять место второго элемента TextInput.Это правильный способ сделать это?Кажется, немного подделка.

import React from 'react';
import { StyleSheet, TextInput, View, Button, Text } from 'react-native';

export default class App extends React.Component {

  state={show: true,}

  handleElement(){}
  handleKey(){}
  onSubmit=()=>{

    this.setState({show:!this.state.show})
    //  this.setState(prevState =>({show:!prevState.show}))
  }
  render() {
    return (
      <View style={styles.container}>
        { this.state.show &&
          <View>
            <TextInput style={styles.input}
              placeholder='Element'
              onChangeText={this.handleElement} />
            <TextInput style={styles.input}
              placeholder='Key'
              onChangeText={this.handleKey}/>
            <Button title='Add' onPress={this.onSubmit} />
          </View>
        }
        { !this.state.show &&
          <View>
            <TextInput style={styles.input}
              placeholder='Element'
              onChangeText={this.handleElement} />
            <Text style={styles.blank}>&nbsp;</Text>
            <Button title='Add' onPress={this.onSubmit} />
          </View>
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    padding:5,
    borderColor:'black',
    borderWidth:1,
    width:100,
    marginTop:5,
  },
  blank: {
    borderColor:'white',
    borderWidth:1,
    padding:5,
    width:100,
    marginTop:5,
  },
});

Answer 1

Для этого можно воспользоваться преимуществами позиционирования Flex.Также макет может быть упрощен до чего-то вроде:

render() {
  return (
    <View style={styles.container}>
      <View style={styles.wrapper}>
        <TextInput 
          style={styles.input}
          placeholder='Element'
          onChangeText={this.handleElement}
        />
        {
          this.state.show && 
          <TextInput
            style={styles.input}
            placeholder='Key'
            onChangeText={this.handleKey}
          />
        }
        <Button title='Add' onPress={this.onSubmit} />
      </View>
    </View>
  )
}

Стили для оболочки и элементов контейнера, использующих flex:

wrapper: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'column'
},
container: {
    flex: 0.5
}

Значение flex контейнера зависит от вашегомакет и сколько места вы хотите, чтобы этот элемент занимал экран.

Answer 2

Я бы порекомендовал использовать visibility:hidden на втором TextInput.Он сохранит интервал, просто скрыть элемент.