如何使用 react-native-router 将数据从一个屏幕传递到另一个屏幕

Question

我对 react-native 很陌生。

谁能告诉我如何使用 react-native-router 将数据传递到另一个屏幕。

我有一个平面列表，当单击一个列表项时，它会显示一条警报消息，当我单击确定按钮时，它应该在下一个屏幕中显示 RxNumberin。enter image description here

这是我的完整课程

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  Alert
 
} from 'react-native';
import {  Actions } from 'react-native-router-flux';
import colors from '../styles/colors';

 class MedicineFlatList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }
  componentDidMount() {
    fetch('https://api.myjson.com/bins/96ebw')
     .then((response) => response.json())
     .then((responseJson) => {
       this.setState({
         isLoading: false,
         //dataSource: responseJson,
         dataSource: responseJson.map(item => item.ReadyForPickups).reduce((acc, currValue) => { return acc.concat(currValue); }, [])
       }, 

       );
     })
     .catch((error) => {
       console.error(error);
     });
 }
 GetItem(RxNumber) {
  Alert.alert(
    'RxNumber',
    RxNumber,
    
    [
      { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
      { text: 'OK', onPress: (item) => Actions.listitem({ item: item.RxDrugName }) },
    ],
    { cancelable: false },
    
  );
  }
  listItem=(item) => {
    return (
    <Text style={styles.itemName}>{item.RxDrugName }</Text>
    );
  }

   keyExtractor = (index) => {
    return index.toString();
  }

   renderItem = ({ item }) => {
    return (
        <View style={styles.itemBlock}>
          <View style={styles.itemMeta}>
            <Text style={styles.itemName}>{item.RxDrugName}</Text>
            <Text style={styles.itemLastMessage} onPress={this.GetItem.bind(this, item.RxNumber)}>{item.RxNumber}</Text>
          </View>

          <View style={styles.footerStyle}>
            <View style={{ paddingVertical: 10 }}>
             <Text style={styles.status}>{item.StoreNumber}</Text>
            </View>
            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Image source={require('../assets/right_arrow_blue.png')} />
            </View>
          </View>

       </View>
    
    );
  }

  renderSeparator() {
    return <View style={styles.separator} />;
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList 
          data={this.state.dataSource}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          ItemSeparatorComponent={this.renderSeparator.bind(this)}
    

        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
  paddingHorizontal: 30,
  backgroundColor: colors.white
  },
  itemBlock: {
  flexDirection: 'row',
  paddingVertical: 15,
  },
  itemMeta: {
  justifyContent: 'center'
  },
  itemName: {
  fontSize: 16,
  color: colors.black_two,
  paddingBottom: 10
  },
  itemLastMessage: {
  fontSize: 14,
  color: colors.black_two,
  },
  status: {
  fontSize: 14,
  color: colors.blue,
  fontWeight: 'bold'
  },
  separator: {
  borderRadius: 4, 
  borderWidth: 1, 
  borderColor: colors.light_gray, 
  },
footerStyle: {
  flexDirection: 'row',
  flex: 1,
  paddingVertical: 10, 
  justifyContent: 'flex-end'
  }
});
export default MedicineFlatList;

谢谢大家，我得到了答案。

Answer 1

如果您使用我推荐的 react-native-router-flux https://www.npmjs.com/package/react-native-router-flux

是这样的

Action.Screen2({id : 1})

在屏幕2上

this.props.id will be 1 

如果您使用的是反应导航 阅读文档它会帮助你 是这样的

this.props.navigation.navigate('Screen2', {data: 'some-stuff'})

您可以像这样访问其他屏幕中的数据。

this.props.navigation.state.params('data')

Answer 2

Tulasi, Roozbeh Mohammadzadeh 是正确的，并使用 react-native-router-flux 回答了您的问题；但是，随着您的继续，您可能希望探索使用 redux 或其他替代 Appstate 系统，有一些。

原因：传递数据适用于小型项目，但大型项目在祖父母、父母、子组件链上下传递变得麻烦且效率低下，难以排除故障和/或维护。

但要回答有关使用 react-native-router 传递数据的问题，请参阅 Todos 部分正上方的以下内容：https://www.npmjs.com/package/react-native-router

this.props.toRoute() 回调 prop 采用一个参数（一个 JavaScript 对象），该参数可以具有以下键：

• name：您的路线名称，将显示为该路线的标题 除非更改导航栏。
• 组件（必需）：React 与您要渲染的视图相对应的类。
• 左角： 指定要在导航栏左侧呈现的组件 （例如 Twitter 应用首页上的“添加人员”按钮）
• rightCorner：指定要在右侧渲染的组件 导航栏
• titleComponent：指定一个组件来替换 标题。例如，这可能是您的徽标（如 Instagram 应用）
• headerStyle：更改标题的样式 新路线。例如，您可以指定一个新的 backgroundColor 并且路由器会自动从一个 给对方上色！
• 数据：将自定义数据发送到您的路线。