0
私はチャットアプリを作って、ページの一番下にTextInputを置いていますが、できません。私がposition: 'absolute' + bottom: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'
}
});
を見つけたことができますか?私はあなたがビュー 'TextInput'のラッパーを与えてメッセージリストを見ることによってそれを行うことができたと思ったので、後で両方でスタイルを行うことができます。 – muhammadaa