React Native栈导航应用package.json问题求助（snack.expo.dev环境）

问题背景 #

在snack.expo.dev平台基于初始代码开发React Native应用时，设备预览出现压缩错误，网页端预览也报无法识别的错误，推测核心问题出在package.json的依赖配置上。本地执行expo install时存在主机相关错误警告，且本地package.json配置受限，需要一份适配栈导航的标准package.json配置。

修正后的package.json #

{
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "react-native-paper": "4.9.2",
    "react-native-screens": "~3.20.0",
    "@react-navigation/native": "^6.1.9",
    "react-native-gesture-handler": "~2.9.0",
    "@react-navigation/native-stack": "^6.9.17",
    "react-native-safe-area-context": "4.5.0",
    "react": "18.2.0",
    "react-native": "0.72.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  }
}

配置说明 #

• 移除react-native-image：React Native自带Image组件，此第三方包无必要且易引发兼容性问题
• 替换带*的依赖版本：使用具体兼容版本避免依赖冲突，这是snack预览报错的常见诱因
• 添加核心框架指定版本：明确react和react-native版本，保证基础环境稳定适配expo
• 补充@babel/core开发依赖：确保代码编译流程正常

现有代码的其他问题修正 #

除package.json外，代码还有几处需调整的细节：

1. 组件参数解构错误 #

SubscribeScreen未正确解构导航参数，导致无法调用导航方法：

// 错误写法
function SubscribeScreen ( navigation )  {
// 正确写法
function SubscribeScreen ({ navigation })  {

2. StyleSheet变量名大小写不一致 #

代码中混用styleSheet和stylesheet，导致样式无法正常应用：

// 统一变量名示例
return (<View style={styles.container}>
let styles = StyleSheet.create({

3. Button组件样式设置错误 #

React Native的Button组件不支持直接传入style属性，如需自定义样式，建议用TouchableOpacity替代：

// 替代示例
import { TouchableOpacity, Text } from 'react-native';

<TouchableOpacity style={styles.buttonContainer} onPress={() => NewsletterPopup(navigation)}>
  <Text style={styles.buttonText}>Subscribe</Text>
</TouchableOpacity>

// 对应样式
buttonContainer: {
  backgroundColor: "blue",
  padding: 10,
  borderRadius: 5,
  alignSelf: 'center'
},
buttonText: {
  color: "white",
  fontSize: 16
}

4. 无效布局属性selfJustify #

React Native中不存在selfJustify属性，需替换为justifySelf或调整父容器的justifyContent：

// 错误写法
selfJustify: 'space-between',
// 正确写法（按需选择）
justifySelf: 'flex-start',
// 或在父容器设置
justifyContent: 'space-between'

内容的提问来源于stack exchange，提问作者Yevgeny Streltsov