如何在react native选项卡视图中使用renderScene将道具传递到FlatList

Question

我是React Native的新手，正试图在FlatList中将道具传递给ListHeaderComponent

这是代码：

const FirstRoute = (props) => {
const _renderHeader = () => {
return(
<View>
{props.isFollowed && 
<TouchableOpacity onPress={props.onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> } 
</View>
)
}
return(
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}>
<FlatList
data={data}
keyExtractor={item => item.id}
renderItem={itemData => ( <Image source={itemData.item.id} style={{height: WIDTH/3, width: WIDTH/3}} />)}
ListHeaderComponent={_renderHeader}
/>
</View>
)
};
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const initialLayout = { width: Dimensions.get('window').width };
export default function Parent() {
const [index, setIndex] = React.useState(0);
const [routes] = useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const [_isFollowed, setIsFollowed] = useState(false);
const _onSubmit = () => {
...
setIsfollowed(true)
}
const renderScene = ({route}) => {
switch(route.key){
case 'first': return <FirstRoute {...props} onSubmit={_onSubmit} isFollowed={_isFollowed} />
case 'second': return <SecondRoute  {...props} />
}
};
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}

但当我保存它时，屏幕会记录错误：找不到isFollowed 的值

我想问题出在我传递道具的方式上。我还在学习。因为当我删除ListHeaderComponent时，FlatList仍然很好地生成图像列表。我不知道这是否与renderScene有关

我真的不明白为什么

请帮帮我。非常感谢

Answer 1

让我直说吧。您需要根据_isFollowed状态定期呈现_renderHeader。因此，您将_onSubmit函数和_isFfollowed状态作为道具传递到第一个路由，以便在_renderHeader处访问它们。正确的

正如我所看到的，一旦您的_renderHeader可以直接访问_isFlowed state和_onSubmit函数，您实际上就不需要这样做了。试一下如下：

export default function Parent() {
const [index, setIndex] = React.useState(0);
const [routes] = useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const [_isFollowed, setIsFollowed] = useState(false);
const initialLayout = { width: Dimensions.get('window').width };
function _onSubmit() {
setIsFollowed(true);
}
function _renderHeader() {
return (
<View>
{_isFollowed && 
<TouchableOpacity onPress={_onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> } 
</View>
);
}
const FirstRoute = () => {
return(
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}>
<FlatList
data={data}
keyExtractor={item => item.id}
renderItem={itemData => ( <Image source={itemData.item.id} style={{height: WIDTH/3, width: WIDTH/3}} />)}
ListHeaderComponent={_renderHeader}
/>
</View>
)
};
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

const renderScene = ({route}) => {
switch(route.key){
case 'first': return <FirstRoute />
case 'second': return <SecondRoute />
}
};
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}

我在你的代码中不理解的另一点，也无法检查，因为我没有尝试运行它，这是下面的函数：

function _renderHeader() {
return (
<View>
{_isFollowed && 
<TouchableOpacity onPress={_onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> } 
</View>
);
}

如果你想在_isFlowed为true的情况下渲染TouchableOpacity，你应该使用这样的三元运算符：

function _renderHeader() {
return (
<View>
{_isFollowed ?  
<TouchableOpacity onPress={_onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> } 
: <></>
}
</View>
);
}