时间戳

首页 > 解决方案 > 在本机反应中将 ScrollView 包裹在对象列表周围

react-native - 在本机反应中将 ScrollView 包裹在对象列表周围

问题描述

以下是我在 react-native 上尝试的一个简单代码，它在模拟器上运行良好，除了它是硬编码的

function CardCreator(props) {
const cards = props.cards;
const basicCards = cards.map((c, index) => {
    return <BasicCard key={index} character={c} />
});
// return basicCards;

return (
    <ScrollView>
        {/* code to replace the following */}
        <BasicCard character={cards[0]} />
        ..
        <BasicCard character={cards[9]} />
        {/* returning the basicCards entries here */}
    </ScrollView>
)}

我可以将basicCards对象返回到 render() 但无法滚动查看所有项目。当前使用硬编码值返回预期结果。basicCards包裹后如何返回对象ScrollView

标签： react-native

解决方案

您可以避免在渲染方法中进行硬编码，例如，

render() {
  const { cards } = this.props;
  return (
    <ScrollView>
     {
       cards.map((c, index) => {
         return <BasicCard key={index} character={c} />
       })
     }
    </ScrollView>
  );
 }

只需遍历cards并返回每个单独的组件。

或者

根据您的示例代码，更改将是

function CardCreator(props) {
  const cards = props.cards;
  const basicCards = cards.map((c, index) => {
      return <BasicCard key={index} character={c} />
  });

return (
   <ScrollView>
     {basicCards}
   </ScrollView>
 )
}

希望这会有所帮助！

推荐阅读