Question

我是 reactjs 的新手，我正在用零食编码。我正在尝试制作一个应用程序，当我在浏览器上运行它时，一切正常，但是当我在移动设备上的 Expo Go 上尝试时，该应用程序要么完全崩溃，要么显示此错误

<块引用>

文本字符串必须在组件中呈现

我不太确定代码有什么问题

export default class Menu extends React.Component {
  render() {
    return (
      <View style={styles.background}>
        /*<ImageBackground style={styles.background}></ImageBackground>*/
        {/*Header*/}
        <View style={styles.header}>
          <Image
            source={require('../../components/YANA.png')}
            style={styles.yana}></Image>
          <Text style={styles.headerText}>YANA</Text>
        </View>
        {/*Menu buttons*/}
        <View style={styles.container}>
          <Pressable
            style={styles.button}
            onPress={() => {
              this.props.navigation.navigate('Chatbot');
            }}>
            <Image
              source={require('../../components/chatbot.png')}
              style={styles.buttonImageChat}></Image>
            <Text style={styles.text}>Chatbot</Text>
          </Pressable>

          <Pressable
            style={styles.button}
            onPress={() => {
              this.props.navigation.navigate('selfCare');
            }}>
            <Image
              source={require('../../components/selfcare.png')}
              style={styles.buttonImage}></Image>
            <Text style={styles.text}>Self-Care</Text>
          </Pressable>

          <Pressable
            style={styles.button}
            onPress={() => {
              this.props.navigation.navigate('Journal');
            }}>
            <Image
              source={require('../../components/journal.png')}
              style={styles.buttonImage}></Image>
            <Text style={styles.text}>Journal</Text>
          </Pressable>

          {/*Phone and home button*/}
          <Pressable
            style={styles.phone}
            onPress={() => {
              this.props.navigation.navigate('Menu');
            }}>
            <Image
              source={require('../../components/phone.png')}
              style={styles.imgPhone}></Image>
          </Pressable>

          <Pressable
            style={styles.home}
            onPress={() => {
              this.props.navigation.navigate('Splash');
            }}>
            <Image
              source={require('../../components/home.png')}
              style={styles.imgHome}></Image>
          </Pressable>
        </View>
      </View>
    );
  }
}

希望有人能帮忙

Answer 1

您应该在 style={{ textAlign: "center !important;" }} 组件之间添加花括号。 React Native 将您的字符串视为字符串，因此它会抛出一个错误，即字符串必须包含在 ImageBackground 标记中

React App 在浏览器中使用零食运行时运行良好，但在移动设备上使用 expo go 运行时遇到错误

1 个答案: