Question

我在react native中创建了3个按钮。我将图像存储在三个不同的组件中。我希望当我单击第一个按钮时，它显示存储在第一个组件中的图像，依此类推。我想使用switch case语句。我不想使用标签导航器之类的任何库。

app.js

import React, { Component } from "react";
import {
 Platform,
 StyleSheet,
 Text,
 View,
 Alert,
 Button,
 TouchableOpacity
} from "react-native";

import first from "./components/first";
import second from "./components/second";
import third from "./components/third";

export default class App extends Component<Props> {
   render() {
     return (
       <View style={styles.container}>
         <TouchableOpacity style={styles.wrapper1}>
           <Text>Button 1</Text>
         </TouchableOpacity>
         <TouchableOpacity style={styles.wrapper2}>
         <Text>Button 2</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.wrapper3}>
        <Text>Button 3</Text>
        </TouchableOpacity>
       </View>
      );
    }
  }

const styles = StyleSheet.create({
  container: {
   flex: 1,
   backgroundColor: "#F5FCFF",
   alignItems: "flex-start",
   flexDirection: "row"
  },
   wrapper1: {
   borderWidth: 1,
   borderColor: "black",
   backgroundColor: "red",
   paddingHorizontal: 40,
   paddingVertical: 15
   },
  wrapper2: {
    borderWidth: 1,
    borderColor: "black",
    backgroundColor: "red",
    paddingHorizontal: 40,
    paddingVertical: 15
   },
  wrapper3: {
    borderWidth: 1,
    borderColor: "black",
    backgroundColor: "red",
    paddingHorizontal: 40,
    paddingVertical: 15
  }
   });

first.js

import React, { Component } from "react";
import {
 Platform,
 StyleSheet,
 Text,
 View,
 Alert,
 Button,
 TouchableOpacity
 } from "react-native";

export default class first extends Component<Props> {
  render() {
    return (
  <View style={styles.container}>
    <Image
      source={{ uri: "http://facebook.github.io/react/img/logo_og.png" 
}}
    />
  </View>
   );
 }
}

 const styles = StyleSheet.create({
   container: {
   flex: 1,
   backgroundColor: "#F5FCFF",
   alignItems: "flex-start",
   flexDirection: "row"
   }
   });

second.js

import React, { Component } from "react";
import {
 Platform,
 StyleSheet,
 Text,
 View,
 Alert,
 Button,
 TouchableOpacity
 } from "react-native";

export default class second extends Component<Props> {
  render() {
    return (
  <View style={styles.container}>
    <Image
      source={{ uri: "http://facebook.github.io/react/img/logo_og.png" 
}}
    />
  </View>
   );
 }
}

 const styles = StyleSheet.create({
   container: {
   flex: 1,
   backgroundColor: "#F5FCFF",
   alignItems: "flex-start",
   flexDirection: "row"
   }
   });

third.js

   import React, { Component } from "react";
   import {
     Platform,
     StyleSheet,
     Text,
     View,
     Alert,
     Button,
     TouchableOpacity
      } from "react-native";

    export default class third extends Component<Props> {
  render() {
    return (
  <View style={styles.container}>
    <Image
      source={{ uri: "http://facebook.github.io/react/img/logo_og.png" 
}}
    />
  </View>
   );
 }
}

 const styles = StyleSheet.create({
   container: {
   flex: 1,
   backgroundColor: "#F5FCFF",
   alignItems: "flex-start",
   flexDirection: "row"
   }
   });

Answer 1

一种干净的方法包括：

将图片网址存储在数组中
使用状态保持当前图片索引
调用一次 Image 组件，并根据状态使用不同的URL
添加按钮以更改状态

我创建了一个工作示例：

https://snack.expo.io/@sanjar/so-53608978

编辑：如果您确实要保留其他组件，并在此处使用开关，这是一个有效的示例：

https://snack.expo.io/@sanjar/so-53608978-2

使用开关进行条件组件渲染

1 个答案: