在 React Native 应用程序中，如何动态更改视图后面的背景颜色？

Question

我正在使用 React Native 构建一个 iOS 应用程序。使用反应导航，我使用“模态”选项打开一个屏幕。这是 iOS 应用程序在模态中打开屏幕的常见行为，该模态会在当前屏幕的顶部设置动画，但也会将两个屏幕向下移动，因此顶部有一个间隙，并在两个屏幕后面显示黑色背景.对于我的应用程序，我想在应用程序运行时动态更改此背景的颜色以显示红色、绿色或蓝色。我如何使用 react native 或 react-navigation api 在 react native 中做到这一点？

Answer 1

为我工作

import React, { useState } from 'react';
import { View, StyleSheet, Button } from 'react-native';

const App = () => {
  const [bgColor, setBgColor] = useState('white');  

  const changeBgColor = () => {
    const colors = ['red', 'green', 'blue', 'yellow'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    setBgColor(randomColor);
  }

  return (
    <View style={[styles.container, { backgroundColor: bgColor }]}>
      <Button title="Change Background Color" onPress={changeBgColor} />
    </View>
  );
};

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

export default App;