Компонент Возврат Проблема React Native

Question

Я новичок в Native React. Я только что просмотрел учебник Expo и пытаюсь создать кнопку, которая может объединить TouchableOpacity и текст в один компонент для повторного использования.

Я продолжаю получать сообщение «Инвариантное нарушение: кнопка» (): Ничего не было возвращено из рендера. " Я также сослался на здесь .

Таблица стилей отсутствует в приведенном ниже коде, это не проблема.

Спасибо!

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>

  );
}

Answer 1

В вашем коде нет ничего плохого, только ваш оператор возврата. Когда вы поместите открывающую скобку в следующую строку, она ничего не вернет, и ваш фактический код компонента будет недоступен, поскольку он будет рассматриваться как отдельный блок. Просто измените его на код ниже.

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