如何在React Native的屏幕底部放置一个TextInput？

我制作了一个聊天应用程序，我想将TextInput放在页面的底部，但我无法做到。如果我尝试的位置：'绝对'+底部：0显示器是空的。我认为我的风格存在弹性问题，我不确定。如何在React Native的屏幕底部放置一个TextInput？

这里是我的代码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' 
    } 
});

来源

2017-08-25 Netheru

你会在哪里发生的信息列表？我想也许你可以通过给包装查看'TextInput'并且查看消息列表是不同的，所以稍后你可以在两个样式中执行样式。 – muhammadaa

尝试。

<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

来源

2017-08-25 16:00:52

如何在React Native的屏幕底部放置一个TextInput？

回答

相关问题