Native Base 组件无法在 Expo Go 上渲染，但在 Web 上运行良好

Question

我的应用程序中有一个页面，它是带有本机基本输入和按钮的表单。当我检查网络上的页面时，一切正常并且看起来很好。但是，当我在 Expo Go 上启动它时，仅加载第一个标题、输入和标题。下面的其余按钮、输入和文本不会加载。

这是我原来的代码。

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>

          //EVERYTHING BELOW DOES NOT SHOW UP ON 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;

我尝试过改变一些东西并移动一些东西。我没有使用react-native中的Text组件，而是尝试使用native-native中的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>
          <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;

有人知道如何解决这个问题吗？

Answer 1

我认为您的样式表或类似的问题可能存在问题。我只是猜测。

删除这个：

height: 100, // For example maybe it is a const height.
overflow: "scroll"