每次打开应用程序时，如何在本机反应中创建自动背景图像更改？

Question

如何在每次以 react native 打开应用时更改背景图像？

我正在尝试使用 Native 应用程序制作应用程序以进行练习，并决定为其添加一些更动态的样式，但我不知道如何实现它。

当我尝试在其后面添加逻辑时，我不断收到语法错误或导出错误

 import React from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  TextInput,
  Dimensions,
  Platform,
  ScrollView,
  AsyncStorage,
  ImageBackground
} from "react-native";
import { AppLoading } from "expo";

import ToDo from "./ToDo";

const { height, width } = Dimensions.get("window");
const noOfPic = 2;
const imgMap = {
  0: "img_0.jpg",
  1: "img_1.jpg",
  2: "img_2.jpg"
};

export default class App extends React.Component {
  state = {
    newToDo: "",
    loadedToDos: false,
    toDos: {}
  };

  componentDidMount = () => {
    this._loadedToDos();
  };

  render() {
    const { newToDo, loadedToDos, toDos } = this.state;
    console.log(toDos);
    if (!loadedToDos) {
      return <AppLoading />;
    }
    
    return (
      <ImageBackground source={require('./assets/images/img_2.jpg')} style={styles.container}>
        <StatusBar barStyle="light-content" />
        <Text style={styles.title}>MS ToDo App</Text>
        <View style={styles.card}>
          <TextInput
            style={styles.input}
            placeholder={"New To Do..."}
            value={newToDo}
            onChangeText={this._controlNewToDo}
            placeholderTextColor={"black"}
            returnKeyType={"done"}
            autoCorrect={false}
            onSubmitEditing={this._addToDo}
            underlineColorAndroid={"transparent"}
          />
          <ScrollView contentContainerStyle={styles.toDos}>
            {Object.values(toDos)
              .sort((a, b) => {
                return a.createdAt - b.createdAt;
              })
              .map(toDo => (
                <ToDo
                  key={toDo.id}
                  deleteToDo={this._deleteToDo}
                  uncompleteToDo={this._uncompleteToDo}
                  completeToDo={this._completeToDo}
                  updateToDo={this._updateToDo}
                  {...toDo}
                />
              ))}
          </ScrollView>
        </View>
      </ImageBackground>
    );
  }

Answer 1

首先让我们将图像映射到一个对象

const imgMap = {
  0: "img_0.jpg",
  1: "img_1.jpg",
  2: "img_2.jpg",
  3: "img_3.jpg",
  4: "img_4.jpg"
};

编写一个基于随机数返回图像的函数。每次加载组件/应用程序时，都会从 0-4 中获取一个随机数（因为您有 5 张图片）

把所有东西放在一起

import React from "react";
import { ImageBackground } from "react-native";

const noOfPic = 4;
const imgMap = {
  0: "img_0.jpg",
  1: "img_1.jpg",
  2: "img_2.jpg",
  3: "img_3.jpg",
  4: "img_4.jpg"
};

const RandomPic = (props) => {
  function getRandomPic() {
    const random = Math.floor(Math.random() * Math.floor(noOfPic));
    return require(`./images/${imgMap[random]}`);
  }
  return (
    <ImageBackground
      source={getRandomPic()}
      style={{ height: 500, width: 500 }}
    />
  );
};

export default RandomPic;

请确保您检查有效的 CodeSandbox https://codesandbox.io/s/react-native-random-image-background-md72s?file=/src/RandomPic.js:0-532