求助：Native Base组件在Expo Go中部分不渲染，网页端正常

我的表单页面使用了Native Base的Input和Button组件，网页端显示正常且功能可用，但在Expo Go中启动时，仅能加载第一个标题、输入框和文本，后续的按钮、输入框及文本均无法加载。尝试将React Native的Text组件替换为Native Base的Text组件后问题未解决，意外发现移除Text组件后，原本无法加载的按钮和输入框可以正常显示。

原始代码 #

import { View, Text } from 'react-native';
import { Button, Input } from 'native-base';

const Control = () => {
  // ... 省略其他逻辑

  return (
      <View>
        <Text style={styles.header}>FOO</Text>
        <View style={styles.container}>
          <Input 
            w={200}
            placeholder="Device" 
            marginBottom={2}
            marginTop={2}
            onChangeText={selectDevice}
          />
          <Text style={styles.title}>BAR</Text>

          // 以下内容在Expo Go中无法加载
          <Button 
            title="THIS DOESN'T LOAD"
            onPress={controlDevice}
            style={styles.button}
          >
            {telemetryState}
          </Button>
          
          <Text style={styles.title}>THIS DOESN'T LOAD</Text>
          <Button 
            title="THIS DOESN'T LOAD"
            onPress={controlLED}
            style={styles.button}
          >
            {THIS DOESN'T LOAD}
          </Button>
          <Text style={styles.title}>THIS DOESN'T LOAD</Text>
          <Input 
              w={200}
              placeholder="THIS DOESN'T LOAD" 
              marginBottom={1}
              onChangeText={handleChange}
          />
          <Button 
            title="THIS DOESN'T LOAD"
            onPress={controlLight}
            style={styles.button}
          >
            THIS DOESN'T LOAD
          </Button>
        </View>
      </View>
  );
}

export default Control;

修改后代码（移除Text组件可正常加载） #

import { View, Text } from 'react-native';
import { Button, Input } from 'native-base';

const Control = () => {
  // ... 省略其他逻辑

  return (
      <View>
        <Text style={styles.header}>FOO</Text>
        <View style={styles.container}>
          <Input 
            w={200}
            placeholder="Device" 
            marginBottom={2}
            marginTop={2}
            onChangeText={selectDevice}
          />

          // 注释掉该Text组件后内容可正常显示
          // <Text style={styles.title}>BAR</Text>
          <Button 
            title="THIS DOESN'T LOAD"
            onPress={controlDevice}
            style={styles.button}
          >
            {telemetryState}
          </Button>
          
          // <Text style={styles.title}>THIS DOESN'T LOAD</Text>
          <Button 
            title="THIS DOESN'T LOAD"
            onPress={controlLED}
            style={styles.button}
          >
            {THIS DOESN'T LOAD}
          </Button>

          // <Text style={styles.title}>THIS DOESN'T LOAD</Text>
          <Input 
              w={200}
              placeholder="THIS DOESN'T LOAD" 
              marginBottom={1}
              onChangeText={handleChange}
          />
          <Button 
            title="THIS DOESN'T LOAD"
            onPress={controlLight}
            style={styles.button}
          >
            THIS DOESN'T LOAD
          </Button>
        </View>
      </View>
  );
}

export default Control;

解决方案 #

• 统一使用Native Base组件体系
  不要混合React Native原生组件和Native Base组件，Native Base提供了自己的Box（替代原生View）和Text组件，全部替换后能避免渲染冲突：

  // 替换导入语句
  import { Box, Text, Button, Input } from 'native-base';
  
  // 替换组件
  <Box>
    <Text style={styles.header}>FOO</Text>
    <Box style={styles.container}>
      {/* 其他Native Base组件 */}
    </Box>
  </Box>
  

• 修复代码语法错误
  原始代码存在明显语法问题，这可能是Expo Go渲染中断的核心原因：

  • Native Base的Button组件不需要title属性，按钮文本直接通过子元素传递
  • {THIS DOESN'T LOAD}是未定义的变量，若为字符串需改为"THIS DOESN'T LOAD"，若为变量需确保已声明
    修正后的Button示例：

  <Button onPress={controlLED} style={styles.button}>
    {telemetryState} {/* 确保该变量已在组件内定义 */}
  </Button>
  

• 检查版本兼容性
  确认Native Base版本与当前Expo SDK、React Native版本匹配，版本不兼容会导致渲染异常。执行以下命令查看当前版本：

  npm list native-base react-native expo
  

  参考Native Base官方文档的版本适配说明，升级或降级到兼容版本。

• 排查容器样式问题
  检查styles.container的样式设置，若存在固定高度或overflow: hidden，会导致后续内容被截断。可以添加flex: 1让容器自适应高度：

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      // 其他样式
    }
  });
  

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