如何解决每次打开应用程序时,如何在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>
);
}
解决方法
首先让我们将图像映射到对象
redis.io
编写一个函数,该函数将根据随机数返回图像。每次加载组件/应用程序时,请从0-4获得一个随机数(因为您有5张图片)
将所有内容放在一起
const imgMap = {
0: "img_0.jpg",1: "img_1.jpg",2: "img_2.jpg",3: "img_3.jpg",4: "img_4.jpg"
};
请确保您选中了有效的CodeSandbox https://codesandbox.io/s/react-native-random-image-background-md72s?file=/src/RandomPic.js:0-532
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。