反应本机地图功能

时间:2020-05-03 19:15:14

标签: react-native

有人可以在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);”,它也只是渲染“ Before”和“ After”。正在记录几个项目。

不知道如何呈现它。

感谢您的帮助!

以下是完整的渲染:

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>
);

1 个答案:

答案 0 :(得分:0)

在控制台之后,您缺少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>