React Native Expo中react-native-signature-canvas组件不显示求助

问题概述 #

在React Native Expo项目中使用react-native-signature-canvas签名组件，按文档完成导入和代码编写后，组件始终无法在屏幕上显示。

已尝试的方法 #

• 添加webStyles设置高度
• 重新安装模块
• 调整组件导入方式

问题排查与解决方案 #

1. 组件尺寸与布局冲突 #

SignatureNav组件的容器样式同时设置了flex:1和固定height:250，加上父组件的padding和flex布局，可能导致签名组件被挤压或无法获取足够空间。

修改方案：

• 移除styles.container中的height:250，让flex布局自动分配空间；
• 给签名组件设置明确的宽高样式，确保其能在页面中占据可见区域：

// SignatureNav组件中修改SignatureScreen的渲染
<SignatureScreen
    ref={ref}
    onOK={(signature) => handleOK(signature)}
    onEmpty={handleEmpty}
    penColor={colorText || "black"}
    onClear={handleClear}
    confirmText="Preview"
    style={{ width: '90%', height: 300, borderWidth:1, borderColor:'#ccc' }} // 添加明确尺寸
/>

// 修改styles.container
container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "flex-start", // 从center改为flex-start，避免内容被推到屏幕外
    padding: 10,
    // 移除height:250
},

2. PenColor初始值为空导致渲染异常 #

penColor初始状态为空字符串，可能导致签名画布无法正常初始化，进而无法渲染。

修改方案：
设置penColor的初始值为默认颜色（比如黑色）：

const [colorText, setPenColor] = useState("black");

3. 父组件ScrollView的高度计算问题 #

SignatureScreen组件使用ScrollView包裹，若未设置contentContainerStyle，子组件可能无法正确获取高度，导致签名组件被隐藏。

修改方案：
给ScrollView添加contentContainerStyle={{ flexGrow: 1 }}，确保子组件能占满可用空间：

// SignatureScreen组件
export default function SignatureScreen() {
    return (
        <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
            <Signature />
        </ScrollView>
    )
}

4. 组件命名冲突风险 #

项目中自定义了SignatureScreen组件，同时又导入了第三方库的同名组件，虽然在不同文件中，但容易引发混淆。建议重命名第三方组件：

// SignatureNav组件中修改导入语句
import SignatureCanvas from "react-native-signature-canvas";

// 渲染时使用重命名后的组件
<SignatureCanvas
    ref={ref}
    // ...其他属性
/>

修改后的完整SignatureNav组件示例 #

import React, { useRef, useState } from "react";
import {
    Text,
    StyleSheet,
    Pressable,
    TextInput,
    View,
    Image,
} from "react-native";
import SignatureCanvas from "react-native-signature-canvas";

export default function SignatureNav() {
const [colorText, setPenColor] = useState("black"); // 设置默认颜色
const ref = useRef();

const [signature, setSign] = useState(null);

const handleOK = (signature) => {
    setSign(signature);
};

const handleColorChange = () => {
    if(colorText) ref.current.changePenColor(colorText);
};

const handleUndo = () => {
    ref.current.undo();
};

const handleEmpty = () => {
    console.log("Empty");
};

const handleRedo = () => {
    ref.current.redo();
};

const handleClear = () => {
    console.log("clear success!");
};

return (
    <View style={styles.container}>
      <Text style={styles.textSign}>Sign Below</Text>
      <View style={styles.row}>
          <Pressable
               style={[
               styles.setButton,
               { marginRight: 30, backgroundColor: "red" },
               ]}
               onPress={handleUndo}
          >
              <Text style={styles.text}>Undo</Text>
          </Pressable>
          <TextInput
              placeholder="Specify Pen Color"
              style={styles.textInput}
              autoCapitalize="none"
              value={colorText}
              onChangeText={setPenColor}
          />
        <Pressable style={styles.setButton} onPress={handleColorChange}>
            <Text style={styles.text}>Set</Text>
        </Pressable>
        <Pressable
            style={[styles.setButton, { marginLeft: 30, backgroundColor: "red" }]}
            onPress={handleRedo}
        >
            <Text style={styles.text}>Redo</Text>
        </Pressable>
     </View>

    <SignatureCanvas
        ref={ref}
        onOK={(signature) => handleOK(signature)}
        onEmpty={handleEmpty}
        penColor={colorText}
        onClear={handleClear}
        confirmText="Preview"
        style={{ width: '90%', height: 300, borderWidth:1, borderColor:'#ccc', marginVertical:10 }}
    />
    <Text style={styles.textSign}>Preview Signature</Text>
    {signature && (
        <Image
            resizeMode="cover"
            style={{ width: 300, height: 180, paddingBottom: 20 }}
            source={{ uri: signature }}
        />
    )}
  </View>
);
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "flex-start",
    padding: 10,
},
row: {
    flexDirection: "row",
    marginTop: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#f2f2f2",
    paddingBottom: 5,
    flexWrap: 'wrap', // 适配小屏幕，避免按钮挤在一起
},
textSign: {
    color: "deepskyblue",
    fontWeight: "bold",
    paddingVertical: 10,
},
text: {
    color: "#fff",
    fontWeight: "900",
},
textInput: {
    paddingVertical: 10,
    textAlign: "center",
    width: 150, // 给输入框设置宽度，避免布局混乱
},
setButton: {
    backgroundColor: "deepskyblue",
    textAlign: "center",
    fontWeight: "900",
    color: "#fff",
    marginHorizontal: 5,
    marginVertical: 5,
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5,
},
});

验证步骤 #

1. 保存修改后的代码
2. 重启Expo开发服务器（expo start -c清除缓存）
3. 切换到"Draw Signature"标签页，检查签名组件是否正常显示

内容的提问来源于stack exchange，提问作者Tofarati Folayan