我在我的react本机项目中第一次使用Lottie，目前我已在Lottie的堆栈中设置了Lottie，以便在应用程序启动时会弹出初始屏幕。我已经在其他新的React Native项目中测试了我的json文件，并且从没有看到动画的问题。但是，当我在实际项目中渲染它时，该图形不会弹出。有人也遇到过这样的事情吗？顺便说一句，我不使用cocoapods运行Lottie文件。我在Xcode中添加了Lottie框架扩展。我有下面的代码。
谢谢！
import React, {Component} from 'react';
import { StyleSheet,View, Text, SafeAreaView, Image, Dimensions} from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import LinearGradient from 'react-native-linear-gradient';
import Animation from "lottie-react-native";
const styles = StyleSheet.create({
mainContent: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
padding:0,
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
imgContainer:{
width: 500,
height: 300,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: "#ffffff",
},
explore: {
width: 315,
height: 208,
margin: 20
},
counsel:{
width: 307,
height: 216,
margin: 20
},
resource:{
width: 282,
height: 236,
margin: 20
},
connect:{
width: 312,
height: 200,
margin: 20
},
ready:{
width: 312,
height: 178,
margin: 20
},
direction:{
width: 311,
height: 215,
margin: 20
},
events:{
width: 281,
height: 160,
margin: 20
},
cinthy:{
width: 297,
height: 191,
margin: 20
},
eLearning:{
width: 258,
height: 215,
margin: 20
},
pin:{
width: 25,
height: 25
},
exploreTitle:{
color:'#F8BD58',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize:24,
textAlign: 'center'
},
counselTitle:{
color:'#E84C37',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize:24,
textAlign: 'center'
},
resourceTitle:{
color:'#91A1CC',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize:24,
textAlign: 'center'
},
connectionTitle:{
color:'#2EA4DC',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize:24,
textAlign: 'center'
},
readinessTitle:{
color:'#5C4C92',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize:24,
textAlign: 'center'
},
directionTitle:{
color:'#82CFCA',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize:24,
textAlign: 'center'
},
eventsTitle:{
color:'#b95bef',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize:24,
textAlign: 'center'
},
cinthyTitle:{
color:'#87ddf4',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize:24,
textAlign: 'center'
},
learningTitle:{
color:'#7ee77a',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize:24,
textAlign: 'center'
},
service:{
width: 215,
height: 41,
},
event:{
width: 207,
height: 41,
},
cinthyBanner:{
width: 200,
height: 41,
},
learn:{
width: 275,
height: 41,
},
logo:{
width: 231,
height: 23,
margin: 30
},
text:{
color: '#ffffff',
fontSize:14,
margin: 20,
marginTop: 30,
fontWeight: "bold"
}
});
const slides = [
{
key: 1,
title: 'Self-Exploration',
text: 'The Career Center offers career services to all currently enrolled CSUN students and eligible alumni',
image: require('../json/SELF_EXPLORATION_01_v004'),
banner:require('../img/serviceBanner.png'),
logo:require('../img/cc_logo_white.png'),
imageStyle: styles.explore,
bannerStyle: styles.service,
logoStyle: styles.logo,
colors: ['#F48E29', '#FCC74D'],
textStyle: styles.text,
titleStyle: styles.exploreTitle
},
{
key: 2,
title: 'Counseling',
text: 'The Career Center offers career services to all currently enrolled CSUN students and eligible alumni',
image: require('../json/SELF_EXPLORATION_01_v004'),
banner:require('../img/serviceBanner.png'),
logo:require('../img/cc_logo_white.png'),
imageStyle: styles.counsel,
bannerStyle: styles.service,
logoStyle: styles.logo,
colors: ['#E84C37', '#E67D2F'],
textStyle:styles.text,
titleStyle: styles.counselTitle
},
{
key: 3,
title: 'Resources',
text: 'The Career Center offers career services to all currently enrolled CSUN students and eligible alumni',
image: require('../json/SELF_EXPLORATION_01_v004'),
banner:require('../img/serviceBanner.png'),
logo:require('../img/cc_logo_white.png'),
imageStyle: styles.resource,
bannerStyle: styles.service,
logoStyle: styles.logo,
colors: ['#6078DD', '#91A1CC'],
textStyle:styles.text,
titleStyle: styles.resourceTitle
},
];
export class onBoarding extends Component {
componentDidMount() {
this.animation.play();
}
static navigationOptions = {
header:null
};
_renderItem = props => (
<LinearGradient
style={[styles.mainContent, {
width: props.width,
height: props.height,
}]}
colors={props.colors}
start={{x: 0, y: .1}} end={{x: .1, y: 1}}
>
<SafeAreaView style={styles.mainContent}>
<Image source={props.logo} style={props.logoStyle}/>
<Image source={props.banner} style={props.bannerStyle}/>
<View style={styles.imgContainer}>
<Animation
ref={animation => {
this.animation = animation;
}}
loop={true}
source={props.image}
/>
<Text style={props.titleStyle}>{props.title}</Text>
</View>
<Text style={props.textStyle}>{props.text}</Text>
</SafeAreaView>
</LinearGradient>
);
render(){
const { navigate } = this.props.navigation;
return(
<AppIntroSlider slides={slides} renderItem={this._renderItem} onDone={() => navigate('Tabs')} showSkipButton={true} onSkip={() => navigate('Tabs')} showPrevButton={true}/>
)
}
}