react-native - 反应原生地图功能

Question

有人可以帮助我在 React Native 中使用地图功能：

以下代码应呈现：“之前”“循环中的项目数：内部”和“之后”：

<Block>
    <Text>Before.... </Text>
</Block>
{bigPosts.map((item, index) => {
    console.log(item.title);
    <TouchableWithoutFeedback
        key={item.title}
        onPress={() =>
            navigation.navigate('Product', { product: item })
        }
    >
        <Block>
            <Text>INSIDE...... </Text>
        </Block>
    </TouchableWithoutFeedback>;
})}
<Block>
    <Text>After.... </Text>
</Block>

对我来说，它只是呈现“之前”和“之后”，即使“console.log(item.title);” 正在记录几个项目。

不知道如何渲染这个..

感谢帮助！

这是完整的渲染：

return (
    <Block flex>
        <ScrollView
            scrollEventThrottle={16}
            showsVerticalScrollIndicator={false}
        >
            <Block flex={3}>
                <ScrollView
                    horizontal={true}
                    pagingEnabled={true}
                    decelerationRate={0}
                    scrollEventThrottle={16}
                    snapToAlignment="center"
                    showsHorizontalScrollIndicator={false}
                    snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
                    contentContainerStyle={{ paddingRight: theme.SIZES.BASE }}
                >
                    <Block>
                        <Text>Before.... </Text>
                    </Block>
                    {bigPosts.map((item, index) => {
                        console.log(item.title);
                        <TouchableWithoutFeedback
                            key={item.title}
                            onPress={() =>
                                navigation.navigate('Product', { product: item })
                            }
                        >
                            <Block>
                                <Text>INSIDE...... </Text>
                            </Block>
                        </TouchableWithoutFeedback>;
                    })}
                    <Block>
                        <Text>After.... </Text>
                    </Block>
                </ScrollView>
            </Block>
            <Block flex row style={{ marginHorizontal: theme.SIZES.BASE }}>
                <Text>Here comes help, students... etc</Text>
            </Block>
        </ScrollView>
    </Block>
);

标签： react-native

Answer 1

您在 console.log 之后缺少 map 函数内的返回

<Block>
   <Text>Before.... </Text>
</Block>
{bigPosts.map((item, index) => {
   console.log(item.title);
   return(
   <TouchableWithoutFeedback
      key={item.title}
      onPress={() =>
        navigation.navigate('Product', { product: item })
      }
   >
    <Block>
        <Text>INSIDE...... </Text>
    </Block>
   </TouchableWithoutFeedback>
   );
 })}
<Block>
 <Text>After.... </Text>
</Block>