使用开关的条件组件呈现

Question

我已经创建了3个按钮在反应本土化。我将图像存储在三个不同的组件中。我希望当我点击第一个按钮时，它会显示存储在第一个组件中的图像等等。我想用开关箱语句。我不想像选项卡导航那样使用任何库。

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

一种干净的方式包括：

• 将图片url存储在数组中
• 使用状态保持当前图片索引
• 使用不同的url (取决于状态)调用图像组件一次
• 添加按钮以更改状态

我创建了一个工作示例：

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

编辑：如果您真的希望保留不同的组件，并且在这里使用一个开关，这就是一个工作示例：

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