Reactjs 如何在每次应用程序打开时在react native中创建自动背景图像更改？

每次在react 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>
    );
  }

从“React”导入React；
进口{
样式表，
文本，
看法
状态栏，
文本输入，
尺寸，
平台，
滚动视图，
异步存储，
图像背景
}从“反应本族语”；
从“expo”导入{AppLoading}；
从“/ToDo”导入ToDo；
const{height，width}=Dimensions.get（“窗口”）；
常数noOfPic=2；
常数imgMap={
0:“img_0.jpg”，
1:“img_1.jpg”，
2:“img_2.jpg”
};
导出默认类App扩展React.Component{
状态={
新教：“，
loadedToDos:false，
待办事项：{}
};
componentDidMount=（）=>{
这个；
};
render（）{
const{newToDo，loadedToDos，toDos}=this.state；
控制台日志（toDos）；
如果（！loadedToDos）{
返回；
}
返回(
MS ToDo应用程序
{对象值（TODO）
.排序（（a，b）=>{
返回a.createdAt-b.createdAt；
})
.map（toDo=>(
))}
);
}

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

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;

从“React”导入React；
从“react native”导入{ImageBackground}；
常数noOfPic=4；
常数imgMap={
0:“img_0.jpg”，
1:“img_1.jpg”，
2:“img_2.jpg”，
3:“img_3.jpg”，
4:“img_4.jpg”
};
const RandomPic=（道具）=>{
函数getRandomPic（）{
const random=Math.floor（Math.random（）*Math.floor（noOfPic））；
返回require（`./images/${imgMap[random]}`）；
}
返回(
);
};
导出默认值；

---

请确保您检查了工作代码沙盒

每次打开应用程序时，您是否只需要随机图像？是的，每次我再次打开应用程序时，都要从我的资产文件夹中随机图像：）我知道它应该可以工作，但我想我还是搞砸了：DRandomPic.js:RandomPic.js：第16行的无效调用：require（“/images/”+imgMap[random]）那个无效的电话是什么意思…我不能让它工作了