javascript - React Native - 世博会：不变违规：嵌套<view>之内<text>目前不支持</text></view>

问题描述

我升级了用 CRNA 创建的 react native 项目。项目在升级之前在 iOS 上运行得很好，但是在 android 设备/模拟器上加载它时我遇到了一些问题，我希望升级能解决这些问题。我将 expo 从版本 27.0.1 升级到 31.0.4，我通读了整个： https ://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough 以检查任何重大更改。

我一步一步地升级了博览会： https ://docs.expo.io/versions/v31.0.0/workflow/upgrading-expo

旧包.json：

{
  "name": "FamScore3",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.14.0",
    "jest-expo": "~27.0.0",
    "react-test-renderer": "16.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@firebase/auth": "^0.7.6",
    "@firebase/database": "^0.3.6",
    "axios": "^0.18.0",
    "expo": "^27.0.1",
    "firebase": "^5.5.1",
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-native-elements": "^0.19.1",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-router-flux": "^4.0.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  }
}

旧 app.json：

{
  "expo": {
    "sdkVersion": "27.0.0"
  }
}

升级包.json：

{
  "name": "FamScore3",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.14.0",
    "jest-expo": "^31.0.0",
    "react-test-renderer": "16.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@firebase/auth": "^0.7.6",
    "@firebase/database": "^0.3.6",
    "axios": "^0.18.0",
    "metro-react-native-babel-preset": "^0.45.0",
    "expo": "^31.0.4",
    "firebase": "^5.5.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
    "react-native-elements": "^0.19.1",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-router-flux": "^4.0.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  }
}

升级后的 app.json：

{
  "expo": {
    "sdkVersion": "31.0.0"
  }
}

升级完成后，我在 iPhone 6s 上重新安装了 expo 应用程序。我清除了世博会的缓存。关闭 expo 打包程序和终端并重新启动我的计算机。

现在，该应用程序在 iOS 和 Android 上都出现错误。在 iOS 上，我收到错误：

在物理设备上收到错误

第一个错误所在的位置（图标相关）：

<Button style={styles.buttonStyle} textStyle={{ flex: 1 }} onPress={() => this.authUser()}>
            <Icon
              iconStyle={styles.iconStyle}
              size={iconSize}
              color={'#ea8a8a'}
              type='simple-line-icon'
              name={'heart'}
            />
            Login
          </Button>

这里使用的按钮实际上不是从 react-native 导入的，而是我用相同名称制作的自定义按钮（可能是个坏主意，但是嘿）：

class Button extends Component {

  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress} style={[styles.buttonStyle, this.props.style]}>
        <Text style={[styles.textStyle, this.props.textStyle]}>{this.props.children}</Text>
      </TouchableOpacity>
    )
  }
}

export { Button }

在更新之前这从来都不是问题，我似乎真的找不到破坏此代码的原因。任何帮助将不胜感激，因为我发现自己在这里转圈。如果您希望我为您提供任何其他代码，我很乐意这样做。提前感谢一堆。

标签： javascriptreact-nativeexpo

<TouchableHighlight onPress={()=>{}}> <View> <Icon iconStyle={styles.iconStyle} size={iconSize} color={'#ea8a8a'} type='simple-line-icon' name={'heart'} /> <Text> Login </Text> </View> </TouchableHighlight>

javascript - React Native - 世博会：不变违规：嵌套之内目前不支持

问题描述

解决方案

推荐阅读