Question

我制作了一个聊天应用，我想将TextInput放在页面底部，但我无法做到。如果我尝试使用position：'absolute'+ bottom：0，则显示为空。我觉得我的风格有弹性问题，我不确定。

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

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

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

1 个答案: