Summary of Problem
我正在使用react native snap carousel,但渲染不正确.它只会在被滑动后渲染,我需要在屏幕最初渲染时进行渲染.当我在React Navigation中将屏幕指定给BottomTabNavigator的初始路径或堆栈Navigator中的初始路径时, carousel 呈现得非常完美.当我将完全相同的屏幕分配给Stack Navigator中的任何其他路由时,它不会呈现 carousel ,直到我滑动它.
我需要使用带有 carousel 的屏幕作为堆栈导航器中的第二条路径,但我不知道如何使其正常工作.
What I've tried
- 我试着把其他的东西都从屏幕上拿出来
- 我还try 从头开始创建一个新屏幕.
- 我已经在Stack Navigator和
- 我也try 过切换到基于类的react组件
Code
Component with Carousel
import React, { useState } from "react";
import { View, Text } from "react-native";
import { useDispatch } from "react-redux";
import styles from "./StatSelectorStartComp.style";
import HeaderText from "~/app/Components/HeaderText/HeaderText";
import Carousel from "react-native-snap-carousel";
import LargeButton from "~/app/Components/Buttons/LargeButton/LargeButton";
import NavigationService from "~/app/services/NavigationService";
import { saveStartCompStatCategory } from "~/app/Redux/actions/dailyCompActions";
const StatSelectorStartComp = ({}) => {
const dispatch = useDispatch();
const ENTRIES1 = ["Kills", "Wins", "K/D", "Win %"];
const [selectedStat, setSelectedStat] = useState(ENTRIES1[0]);
const _renderItem = ({ item, index }) => {
return (
<View style={styles.slide}>
<Text style={styles.compSelectStatCarousel}>{item}</Text>
</View>
);
};
return (
<View style={styles.container}>
<View style={styles.headerTextView}>
<HeaderText header={"Configure Competition"} />
</View>
<Text style={styles.h5Secondary}> Which stat will you track?</Text>
<View style={styles.selectStatView}>
<Text style={styles.mediumGreyedOut}>Most {selectedStat} Wins</Text>
<Carousel
ref={c => {
_carousel = c;
}}
data={ENTRIES1}
renderItem={_renderItem}
sliderWidth={375}
itemWidth={100}
onSnapToItem={index => {
setSelectedStat(ENTRIES1[index]);
}}
/>
</View>
<View style={styles.buttonView}>
<LargeButton
onPress={() => {
dispatch(saveStartCompStatCategory(selectedStat));
NavigationService.navigate("CompAddFriends");
}}
buttonText="Add Friends"
/>
</View>
</View>
);
};
export default StatSelectorStartComp;
Styles for Component with Carousel
import { StyleSheet } from "react-native";
import { backgroundColor } from "~/app/Constants";
import {
h5Secondary,
mediumGreyedOut,
compSelectStatCarousel
} from "~/app/FontConstants";
export default StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
backgroundColor
},
headerTextView: {
flex: 1
},
h5Secondary,
selectStatView: {
flex: 3
},
mediumGreyedOut,
compSelectStatCarousel,
buttonView: {
flex: 2
}
});
React Navigation Configuration
const StartCompStack = createStackNavigator({
StartFriendsComp: {
screen: StartFriendsComp
},
StatSelectorStartComp: {
screen: CarouselTest
},
CompAddFriends: {
screen: CompAddFriends
},
FinalCompScreen: {
screen: FinalCompScreen
}
});
const ProfileStack = createStackNavigator({
Profile: {
screen: ProfileScreen
},
Settings: {
screen: SettingsScreen
}
});
const BottomTabNav = createBottomTabNavigator(
{
Home: {
screen: HomeScreen
},
Competitions: {
screen: Competitions
},
StartComp: {
screen: StartCompStack,
navigationOptions: () => ({
tabBarVisible: false
})
},
CompScreen: {
screen: CompScreen
},
Friends: {
screen: FriendsDrawer
},
Profile: {
screen: ProfileStack
},
FacebookFriendsList
},
{
tabBarComponent: CustomTabNav,
initialRouteName: "Home"
}
);
Pictures outlining the problem
When screen loads, carousel not rendered
After swiping on carousel