在Galio-Framework下不能显示Toast

Question

我正在使用expo-cli创建一个测试应用程序。安装galio-framework在屏幕上放一个吐司。但不要展示任何东西。我的代码错了吗?这是我在App.js中的代码

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View,Button } from 'react-native';
import {Toast,Block} from 'galio-framework';
export default function App() {
let isShow= true;
const { useNativeDriver } = this.props;
// const [isShow, setShow] = useState(false);
const setShow = (v)=>{
console.log("show change "+v);
isShow= v;
}
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<Button shadowless onPress={() => setShow(!isShow)} style={styles.btnCC}>click here for toast notifications</Button>
<Block style={styles.bl}>
<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>
</Block>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
bl:{
flex: 1,
height:200,
width:100,
// alignItems: 'center',
// justifyContent: 'center',
},
btnCC:{
width:200,
backgroundColor: '#006600',
}
});

我的代码错了吗?还是框架有bug?

Answer 1

isShow变量必须为React状态。像这样修改代码

export default function App() {
const [isShow, setShow] = React.useState(false)
const { useNativeDriver } = this.props;

return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<Button shadowless onPress={() => setShow(!isShow)} style={styles.btnCC}>click here for toast notifications</Button>
<Block style={styles.bl}>
<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>
</Block>
</View>
);
}