expo-cli项目集成Galio-Framework后Toast组件无法显示问题咨询

问题结论 #

该问题是代码编写错误导致，和Galio-Framework框架本身无关，具体错误点和修正方案如下：

• 状态更新逻辑错误：你使用普通变量let isShow= true控制Toast显隐，普通变量的修改不会触发React组件重渲染，界面永远不会响应变量变化。需要启用你注释掉的useState Hook来声明响应式状态。
• 函数组件语法错误：函数组件不存在this实例，代码中const { useNativeDriver } = this.props;行会直接抛出运行错误，直接删除该行即可。
• 容器样式限制显示：你将Toast嵌套在宽度仅为100的Block容器内，Toast的显示范围被挤压，即使状态更新也无法正常展示。建议将Toast组件放在页面最外层View下，避免被小尺寸容器限制。
• 属性误用：shadowless是Galio提供的Button组件专属属性，你当前使用的是React Native原生Button，该属性无效，可直接删除或替换为Galio的Button组件。

修正后可正常运行的代码 #

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { Toast, Block } from 'galio-framework';

export default function App() {
  // 用useState声明响应式状态
  const [isShow, setShow] = useState(false);

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <Button 
        onPress={() => setShow(!isShow)} 
        style={styles.btnCC} 
        title="click here for toast notifications"
      />
      {/* Toast移到外层容器，避免被样式限制 */}
      <Toast isShow={true} positionIndicator="top">This is a top positioned toast</Toast>
      <Toast isShow={isShow} positionIndicator="center" color="success">This is a center positioned toast</Toast>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnCC:{
    width:200,
    backgroundColor: '#006600',
  }
});

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