React Native 视图在 If 语句上不起作用答案

【问题标题】：React Native The View Doesnt Work On If StatmentReact Native 视图在 If 语句上不起作用
【发布时间】：2021-10-20 06:09:08
【问题描述】：

                onValueChange={(itemValue) => {
                    setSelectedValue(itemValue); 
                    if(itemValue == 'other'){
                        alert('You Choose: '+itemValue+' Nice')
                        
                        return(
                            // The <View> Doesnt Work Why ????
                            <View style={{backgroundColor:'red',height:5000,width:5000,}}>
                                <Text>Anas</Text>
                            </View>
                        )
                        
                    }
                    
                }}

这不起作用为什么？？？？如果声明或我可以，我不能把它放进去？我不知道！！

【问题讨论】：

标签： android ios reactjs react-native

【解决方案1】：

我整理了一个小沙盒，您可以在其中看到如何实现您想要的示例：https://codesandbox.io/s/sad-bird-lzzbb

import React, { useState } from "react";
import { Button, Text, View } from "react-native";

export default function App() {
  const [selectValue, setSelectedValue] = useState('');

  const onValueChange = (itemValue) => {
    setSelectedValue(itemValue);
  };

  return (
    <div className="App">
      <Button
        onPress={() => onValueChange("other")}
        title="Click to set value to 'other'"
      />
      {selectValue === "other" ? (
        <View style={{ backgroundColor: "red", height: 5000, width: 5000 }}>
          <Text>Anas</Text>
        </View>
      ) : null}
    </div>
  );
}

您可以使用onValueChange 函数在您想要的任何事件中将其作为回调传递（例如我创建的那个按钮的onPress），但是您需要在返回功能组件时返回所有jsx（或者 render 函数，如果你正在使用类组件）

【讨论】：