React Native引入TouchableHighlight后出现Minified React error #152报错求解

Minified React error #152触发的核心原因是组件未正确返回需要渲染的JSX元素，你的代码共有3处触发该报错的问题：

• 未导入NavigationContainer依赖
• 根App组件没有添加return关键字，内部的JSX内容未被正确返回
• Loja组件内TouchableHighlight的onPress事件绑定了Loja组件本身，会触发无限递归渲染
  另外Loja组件的根View固定高度为85，远小于内部子元素总高度，会导致内容显示截断，可根据需求调整高度值或者改成自适应。

修复后完整代码 #

import React from 'react';
// 新增导入NavigationContainer
import { NavigationContainer } from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {Text, View, Image, ScrollView, TextInput,Button,TouchableHighlight, StyleSheet} from 'react-native';
import Hulka from './assets/Hulka.png';
import newwave from './assets/newwave.png'
import candy from './assets/candy.png'
import death from './assets/death.png';
import whatif from './assets/whatif.png';

function Home(){
  return (
    <ScrollView>
  <View style={{backgroundColor: 'white'}}>
<View style={{ height:65, width:360 , backgroundColor:'#870E94'}}>
<Text style = {{fontSize:14,color: 'white', textAlign:'center',fontWeight:'bold',marginTop:22}}>
Novo Usuário? SELK25 para 25% de cashback na sua primeira compra!</Text>
      </View>

     <Image 
source ={Hulka}
style = {{ width: 360 , height: 200 , marginTop:10}}/>

<Text style = {{fontSize:25,color: '#870E94',textAlign:'center', fontWeight:'bold',marginTop:10}}>
⬇ ATUALIZAÇÕES ⬇</Text>
     <Image 
source ={newwave}
style = {{ borderRadius:5,width: 340 , height: 180, marginTop:17, marginLeft: 10, marginRight: 10}}/>
<Text style = {{fontSize:10,color: '#d6d6d6',marginTop:3,marginLeft: 10}}>http://Greenbent.com.br/atualization/new-wave/pics</Text>

<Image 
source ={candy}
style = {{ borderRadius:5,width: 340 , height: 180, marginTop:17 , marginLeft: 10, marginRight: 10}}/>
<Text style = {{fontSize:10,color: '#d6d6d6',marginTop:3,marginLeft: 10}}>http://Greenbent.com.br/atualization/rock-candy-promotion/buying</Text>

<Image 
source ={death}
style = {{ borderRadius:5,width: 340 , height: 180, marginTop:17 , marginLeft: 10, marginRight: 10}}/>
<Text style = {{fontSize:10,color: '#d6d6d6',marginTop:3, marginLeft: 10}}>http://Greenbent.com.br/atualization/justice-league-death-metal-mcfarlane</Text>

<Image 
source ={whatif}
style = {{ borderRadius:5,width: 340 , height: 180, marginTop:17 , marginLeft: 10, marginRight: 10}}/>
<Text style = {{fontSize:10,color: '#d6d6d6',marginTop:3, marginLeft: 10}}>http://Greenbent.com.br/atualization/buying/pre-order/what-if-colection</Text>
</View>
</ScrollView>
  );
  }

function Loja(){
  // 新增点击处理函数，替换原来的Loja绑定
  const handlePress = () => {
    // 这里写你的点击逻辑，比如跳转、弹窗等
    console.log('按钮被点击')
  }
  return (
  {/* 调整根View高度为自适应，你也可以改成你需要的固定高度 */}
  <View style={{ width:360 , alignItems: 'center' , backgroundColor:'#870E94'}}>
  <TextInput
              multiline={false}
              numberOfLines={1}
              placeholder="Como podemos ajudar? ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀"
              style={{
                backgroundColor: 'white',
                padding: 8,
                marginTop:30,
                fontSize: 16,
                borderRadius: 10,
              }}
            />
  
   <Text style = {{fontSize:25,color: '#78ed24',textAlign:'center', fontWeight:'bold',marginTop:20}}>Suas pesquisas</Text>

   <View style={styles.container}>
    <TouchableHighlight onPress={handlePress}>
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </TouchableHighlight>
    </View>
  </View>
  );
}

function Curtidas(){
  return (
  <View style={{ height:55, width:333 , alignItems: 'center' , backgroundColor:'#090909'}}>
  <Image 
source ={Hulka}
style = {{flex:1, width: 100, height: 50}}/>
  </View>
  );
}

function Ajustes(){
  return (
  <View style={{ height:55, width:333 , alignItems: 'center' , backgroundColor:'#090909'}}>
  <Image 
source ={Hulka}
style = {{flex:1, width: 100, height: 50}}/>
  </View>
  );
}

const styles = StyleSheet.create({
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    marginTop:10,
    paddingHorizontal:30
  }
});

const Tab = createBottomTabNavigator();

export default function App() {
  // 新增return关键字返回JSX
  return (
    <NavigationContainer>
       <Tab.Navigator initialRouteName="Home"
          tabBarOptions={{ 
            activeTintColor: 'white',
            inactiveTintColor: 'white',
            activeBackgroundColor: '#78ed24',
            inactiveBackgroundColor: '#54c206',
            labelStyle: { fontSize: 15 ,fontWeight: 'bold',},
            style: { height: 55},
          }}>

       <Tab.Screen name="Home" component={Home}
       options={{
         tabBarLabel: 'Home',
         tabBarIcon: ({Home }) => (
           <Ionicons name="home" color={'white'} size={26}  style={{marginTop:3}}/>
         ),
       }}
       />
       
       <Tab.Screen name="Loja" fontWeight="bold" component={Loja}
       options={{
         tabBarLabel: 'Loja',
         tabBarIcon: ({Loja }) => (
           <Ionicons name="logo-usd" color={'white'} size={28} style={{marginTop:4}}  />
         ),
       }}
       />

       <Tab.Screen name="Curtidas" component={Curtidas}
       options={{
         tabBarLabel: 'Curtidos',
         tabBarIcon: ({ Curtidas}) => (
           <Ionicons name="heart" color={'white'} size={26}  style={{marginTop:3}}/>
         ),
       }}
       />

<Tab.Screen name="Ajustes" component={Ajustes} style={{fontWeight:'bold'}}
       options={{
         tabBarLabel: 'Ajustes',
         tabBarIcon: ({ Ajustes}) => (
           <Ionicons name="settings" color={'white'} size={26}  style={{marginTop:3}}/>
         ),
       }}
       />

    </Tab.Navigator>
    </NavigationContainer>
  )
}

内容的提问来源于stack exchange，提问作者Larry Knoor