定位反应元素

Question

以下代码有效，但想知道这是否真的是完成手头任务的最佳方法。当TextInput显示两个show = true字段时，会有两个show = false个字段。当TextInput在屏幕上显示相同位置的第一个而不显示第二个时。我们已经替换了一个空白的Text元素来占用第二个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, }, });元素的空间。这是正确的方法吗？这似乎有点儿了。

{{1}}

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
}

容器的弹性值取决于您的布局以及您希望该元素占据屏幕的空间大小。

Answer 2

我建议在第二个visibility:hidden上使用TextInput。它将保留间距，只需隐藏元素。