我在这里一直在关注本教程https://www.youtube.com/watch?v=pgDOpIm6ozQ(#1 Snapchat UI滑动动画| React Native Layouts-Expo and Native Base)
但是,当我在博览会上运行它时,它仅显示一个空白屏幕,我检查是否存在与版本之间的兼容性有关的任何问题,但我没有发现任何东西 My Android Emulator Screen
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Container, Content } from 'native-base';
import Swiper from 'react-native-swiper';
const styles = StyleSheet.create({
slideDefault: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
text: {
color: 'white',
fontSize: 30,
fontWeight: 'bold'
}
})
export default class App extends React.Component {
constructor() {
super()
this.state = {
outerScrollEnabled: true
}
}
verticalScroll = (index) => {
if (index !== 1) {
this.setState({
outerScrollEnabled: false
})
}
else {
this.setState({
outerScrollEnabled: true
})
}
}
render() {
return (
<Container>
<Content>
<Swiper
loop={false}
showsPagination={false}
index={1}
scrollEnabled={this.state.outerScrollEnabled}
>
<View style={styles.slideDefault}>
<Text style={styles.text}>Chat</Text>
</View>
<Swiper
loop={false}
showsPagination={false}
horizontal={false}
index={1}
onIndexChanged={(index) => this.verticalScroll(index)}
>
<View style={styles.slideDefault}>
<Text style={styles.text}>Search</Text>
</View>
<View style={styles.slideDefault}>
<Text style={styles.text}>Camera</Text>
</View>
<View style={styles.slideDefault}>
<Text style={styles.text}>Memories</Text>
</View>
</Swiper>
<View style={styles.slideDefault}>
<Text style={styles.text}>Stories</Text>
</View>
</Swiper>
</Content>
</Container>
);
}
}
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^30.0.1",
"native-base": "^2.3.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.1.1"
}
}