组件返回问题 React Native答案

【问题标题】：Component Return Issue React Native组件返回问题 React Native
【发布时间】：2020-09-12 19:03:45
【问题描述】：

我对 Native React 还是很陌生。我刚刚浏览了Expo tutorial，我正在尝试制作一个可以将 TouchableOpacity 和 Text 合并为一个组件以实现可重用性的 Button。

我不断收到“不变违规：按钮（）：渲染没有返回任何内容。”我还引用了here。

样式表不在下面的代码中，不是问题。

谢谢！

import React from 'react';
import { Image, Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as Sharing from 'expo-sharing';

function Button(props)
{
  return
  (
  <TouchableOpacity
    onPress={props.command} style = {styles.button}>
    <Text style={styles.buttonText}>{props.t}</Text>
  </TouchableOpacity>
  );
}

export default function App() {
  const [selectedImage, setSelectedImage] = React.useState(null);

  let openImagePickerAsync = async() => {
    let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();

    if (permissionResult.granted === false)
    {
      alert("Permission to access camera roll is required!");
      return;
    }

    let pickerResult = await ImagePicker.launchImageLibraryAsync();
    if (pickerResult.cancelled === true)
    {
      return;
    }

      setSelectedImage({localUri:pickerResult.uri});
  };


  let openShareDialogAsync = async() => {
    if (!(await Sharing.isAvailableAsync()))
    {
      alert(`The image is available for sharing at: ${selectedImage.remoteUri}`);
      return;
    }

    Sharing.shareAsync(selectedImage.localUri);
  };

  if (selectedImage !== null)
  {
    return(
      <View style={styles.container}>
        <Image
          source ={{uri:selectedImage.localUri}}
          style={styles.thumbnail}
          />

        <TouchableOpacity onPress={openShareDialogAsync} style={styles.button}>
          <Text style={styles.buttonText}>Share this photo</Text>
        </TouchableOpacity>
      </View>
    );
  }
  return (
    <View style={styles.container}>
      <Image source={{uri: "https://i.imgur.com/TkIrScD.png"}} style={styles.logo} />
      <Text style = {styles.instructions}>
        To share a photo from your phone with a friends, just press the button below!
      </Text>

      <Button command = {openImagePickerAsync} t = "Pick a photo"/>

      {/*
      <TouchableOpacity
        onPress={openImagePickerAsync} style = {styles.button}>
        <Text style={styles.buttonText}>Pick a photo</Text>
      </TouchableOpacity>
      */}

    </View>

  );
}

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您的代码没有问题，唯一的问题是您的 return 语句。当您将左括号放在下一行时，它不会返回任何内容，并且您的实际组件代码将无法访问，因为它将被视为一个单独的块。只需将其更改为下面的代码即可。

function Button(props) {
  return (
    <TouchableOpacity onPress={props.command} style={styles.button}>
      <Text style={styles.buttonText}>{props.t}</Text>
    </TouchableOpacity>
  );
}

【讨论】：