如何在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？

回答

相關問題