Question

我目前正在关注Redux的创建者this教程，以将状态管理实现到我的React Native项目中。

我目前陷入困境，因为我不确定如何模仿列表和其中的行的显示。

这是教程中的单个项目渲染：

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={ {
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

这是我的等价物

const StockItem = ({ onClick, SOH, TradeName }) => (
    <TouchableOpacity
        onPress={onClick}
        style={{...styles.stockItem, textDecorationLine: SOH >= 2? 'none' : 'line-through' }}
    >
        {TradeName}
    </TouchableOpacity>
);

现在，我尝试对列表本身遵循相同的过程，但是我不确定我该如何使用React Native副本进行此操作。这是他们的渲染代码段：

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map((todo, index) => (
      <Todo key={index} {...todo} onClick={() => onTodoClick(index)} />
    ))}
  </ul>
)

这是我的尝试：

const StockList = ({ stock, onStockClick }) => (
    <FlatList
        styles={{flex: 1}}
        data={stock}
        renderItem={StockItem}
        keyExtractor={(stock, StockID) => StockID.toString()}
    />
);

我不确定如何正确遵循Redux在React Native的列表呈现中传达的相同原则。我对React Native和Redux还是很陌生，所以我想按照这个Redux教程从创建它的人那里正确地构建一个Redux的想法，所以我想实现这一目标

将Redux React教程转换为React Native

0 个答案: