如何在React Native中将TextInput置于屏幕底部？

Question

我正在制作一个聊天应用，想把TextInput放在页面底部，但是我无法做到。如果我尝试使用position: 'absolute' + bottom: 0 的方式，显示区域会变成空的。我认为我的样式中存在flex的问题，但不确定。

下面是我的MessageScreen代码：

render() {
    return (
      <Wallpaper>
        <KeyboardAvoidingView behavior='padding'>
          <View>
          <TextInput
            style={styles.input}
            onChangeText={text => this.setState({ message: text })}
           // value={this.state.email}
            placeholderTextColor='white'
            underlineColorAndroid='transparent'
          />
            <Button onPress={this.send} title='SEND' />
              </View>
               </KeyboardAvoidingView>
      </Wallpaper>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    color: 'white',
    fontWeight: 'bold',
    backgroundColor: 'transparent',
    paddingLeft: 25
  },
  input: {
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    width: DEVICE_WIDTH ,
    height: 40,
    color: '#ffffff'
  },
 image: {
    width: 40,
    height: 40
  }
});

这是壁纸：

render() {
    return (
      <Image style={styles.picture} source={require('src/components/images/wallpaper.png')}>
        {this.props.children}
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  picture: {
    flex: 1,
    width: undefined,
    height: undefined,
    resizeMode: 'cover'
  }
});

- Netheru

---

你会把消息列表放在哪里？我想也许你可以通过给视图的包装器 TextInput 并将消息列表视图与其区分开来，这样以后你就可以在两者中都进行样式设置。 - manggaraaaa

Answer 1

试一下这个。

<View style={styles.container}>
 <KeyboardAvoidingView 
   style={{position: 'absolute', left: 0, right: 0, bottom: 0}}
   behavior="position"
 >
  <TextInput
    style={styles.input}
    onChangeText={text => this.setState({ message: text })}
    // value={this.state.email}
    placeholderTextColor='white'
    underlineColorAndroid='transparent'
  />
  <Button onPress={this.send} title='SEND' />
 </KeyboardAvoidingView>
</View>

可在此处找到工作示例here

- Chotala Paresh

---

谢谢。我的情况并不完全相同，但这有助于给我一些线索。 - 2upmedia