1

我是 React Native 的新手，我正在尝试创建一个简单的食谱应用程序。在我需要从我的数据集中导航到特定配方之前，我的应用程序可以正常运行。我想要一个可以将数据和索引传递到的 singleRecipe.js 组件，一旦用户在列表视图中单击该配方项，它就会导航到正确的数据。

我已经在 NavigatorIOS 上看到了这一点，但我不太清楚如何在新的 React Navigation 上做到这一点。任何帮助我都会非常感激。

这是我的食谱列表视图文件：

class RecipeScreen extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(RecipeListData)
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(RecipeListData) => <RecipeListItem {...RecipeListData} />}
        />
      </View>
    );
  }
}

RecipeListItem.js

const RecipeListItem = props => (
  <TouchableOpacity onPress={Actions.singleRecipe}>
    <View style={styles.container}>

      <Text>
        {`${props.name}`}
      </Text>
      <Text>
        {`${props.time}`}
      </Text>

    </View>
  </TouchableOpacity>
);

这是我希望将数据传递到的单一配方页面。

class SingleRecipe extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/*// This is a single recipe I need to fill with the data from DataSource*/}
        <Text>
          This is a single recipe!
        </Text>

      </View>
    );
  }
}

我非常基本的数据集：

export default RecipeListData = [
  {
    "name": 'Breakfast Burritos',
    'time': "90 Minutes"
  },
  {
    "name": 'Peanut Butter Chicken',
    'time': "30 Minutes"
  },
  {
    "name": 'Sweet Potato Mash',
    'time': "20 Minutes"
  },
  {
    "name": 'Korma Curry',
    'time': "45 Minutes"
  },
  {
    "name": 'Protein Smoothie',
    'time': "20 Minutes"
  },
]
4

1 回答 1

0

尝试：Actions.singleRecipe({ data: rowData })

然后在 SingleRecipe.js 你应该能够像这样访问它：
<Text>{this.props.data.name}</Text>或<Text>{this.props.data.time}</Text>

于 2017-03-31T19:26:31.517 回答