Question

我对本机很陌生。

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

单击列表项时，我有一个平面列表，它将显示警报消息，当我单击“确定”按钮时，它将在下一个屏幕中显示RxNumber。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（）回调道具采用一个参数（一个JavaScript对象），该参数可以具有以下键：

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

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

2 个答案: