reactjs - React Native：如何使用 TouchableOpacity onPress 更改 BackgroundColor

Question

当我按下时，我一直在改变背景颜色，它正在改变但不是整个屏幕，它有它的限制，有人可以帮我吗？当我按下时，我一直在改变背景颜色，它正在改变但不是整个屏幕，它有它的限制，有人可以帮我吗？当我按下时，我一直在改变背景颜色，它正在改变但不是整个屏幕，它有它的限制，有人可以帮我吗？

这是我的代码，我什至使用了 flex: 1，我该如何解决这个问题，任何帮助）），：

export default Boom=()=>{

    [color, setColor] = useState('white');
    return (

     <View style = {styles.container}>
     
        <TouchableOpacity onPress = {()=> setColor('blue')} style= {{backgroundColor: color,}} >
          <Text style={{
            color: 'white',
            padding: 16,
            marginTop: 16,
            borderColor: '#bbb',
            borderWidth: 1,
            borderStyle: 'dashed',
            borderRadius: 10,
            backgroundColor: 'blue' }}>Blue</Text>

        </TouchableOpacity >



        <TouchableOpacity onPress={() => setColor('red')} style={{ backgroundColor: color, }}>

          <Text style={{
            color: 'white',
            padding: 16,
            marginTop: 16,
            borderColor: '#bbb',
            borderWidth: 1,
            borderStyle: 'dashed',
            borderRadius: 10 ,
            backgroundColor: 'red'}}>Red</Text>
          </TouchableOpacity>


        <TouchableOpacity onPress={() => setColor('black')} style={{ backgroundColor: color }}>

          <Text style={{
            color : 'white',
            padding: 16,
            marginTop: 16,
            borderColor: '#bbb',
            borderWidth: 1,
            borderStyle: 'dashed',
            borderRadius: 10 ,
            backgroundColor : 'black' }} >Black</Text>
</TouchableOpacity>
</View>
    );




}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',}
  })

标签： reactjsreact-native

Answer 1

<View style = {{
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: color
}} >

...
</View>