如何通过向查看器添加叠加层来创建自定义按钮？

如何解决如何通过向查看器添加叠加层来创建自定义按钮？

我想在我的文件查看器应用程序上添加一个自定义保存按钮作为覆盖。我在 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 表达式必须有一个父元素 - 当我删除 View 标记并且如果我添加该标记时，它不会呈现任何内容。

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

如何让它呈现保存按钮？ 有没有更好的方法来添加覆盖按钮？ 保存按钮的预期 UI 是

任何建议表示赞赏

解决方法

我们运行了您的代码，并通过添加样式和编辑语法提出了解决方案。您可以随意调整样式以满足您的需求。

在 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,// For the Text that SaveButton uses
    text: {
        fontWeight: "bold",color: "blue",textAlign: 'center'
    }
});

,

<SaveButton>onPress={() => { 应该是 <SaveButton onPress={() => {