Блог

Я хочу добавить пользовательскую кнопку сохранения как на наложении в свое приложение для просмотра файлов. Я создал кнопку в фрагменте кода файла SaveButton.jsx

 export default function SaveButton({ text, onPress }) {
    <TouchableOpacity onPress={onPress}>
        <View style={styles.button}>
            <Text style={styles.buttonText}>{text}</Text>
        </View>
    </TouchableOpacity>;
} 

И я хочу добавить это в свой файл App.jsx. Но я получаю сообщение об ошибке Выражения JSX должны иметь один родительский элемент — когда я удаляю тег представления и добавляю тег, он ничего не отображает.

 return (<View>
        <DocumentView
          document={filepath}
          />
        <SaveButton>onPress={() => {
                text="Save"
                // Manual Save
                this._viewer.saveDocument().then((filePath) => {
                console.log('saveDocument:', filePath);
              });
              }}</SaveButton>
        </View>
            );
        } 

Как заставить его отображать кнопку «Сохранить»?
Есть ли лучший способ добавить кнопку наложения?
Ожидаемый пользовательский интерфейс для кнопки сохранения
Любое предложение приветствуется

Мы запустили ваш код и нашли решение, добавив стили и отредактировав синтаксис. Вы можете поиграть со стилями в соответствии с вашими потребностями.

В App.js render() функции:

 return (
  <View style={styles.container}>
    <DocumentView
      ref={(c) => this._viewer = c}
      document={this.state.docPath}
    />
    <View style={styles.button}>
      <SaveButton text="Save" onPress={() => {
        // Manual Save
        this._viewer.saveDocument().then((filePath) => {
          console.log('saveDocument:', filePath);
        });
      }}>
      </SaveButton>
    </View>
  </View>
);
 

Стили для App.js :

 const styles = StyleSheet.create({
  // For the view that wraps both DocumentView and the parent View of SaveButton
  container: {
    flex: 1,
  },
  // For the parent View of SaveButton 
  button: {
    position: 'absolute',
    top: 150,
    right: 30,
    margin: 5,
    alignItems: 'center',
    width: 50,
    height: 30,
  }
});
 

В SaveButton.js :

 import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from "react-native";

export default function SaveButton({ text, onPress}) {
    return (
        <TouchableOpacity onPress={onPress} style={styles.buttonView}>
            <Text style={styles.text}>{text}</Text>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    // For the TouchableOpacity that SaveButton uses
    buttonView: {
        height: 30,
        width: 50,
    },
    // For the Text that SaveButton uses
    text: {
        fontWeight: "bold",
        color: "blue",
        textAlign: 'center'
    }
});
 

<SaveButton>onPress={() => { должно быть <SaveButton onPress={() => {