Question

在此页面中，我在ListView中填充Json值，并在选择了特定名称后，尝试使用所选名称进入下一个屏幕。基本上，我是在将价值从一个屏幕传递到另一个屏幕。 //现在，当我在App.js中导入“从“ ./src/screens/Inventory”导入库存“时，**出现错误{起源模块路径。无法从... ***。解析模块库存。请帮助他们。

import React, { Component } from 'react';
import { View, Text, AsyncStorage,TouchableOpacity, ListView, StyleSheet, ActivityIndicator } from 'react-native';

import { StackNavigator } from 'react-navigation';
import {Insert} from '../api/Loginapi'

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

class Inventory extends Component
{
    static navigationOptions =
    {
        title: "List Items"
    };

    constructor()
    {
        super();
        this.state = { dataSource: ds.cloneWithRows([]), loading: true };
    }

    componentDidMount()
    {
        fetch('https://gamersite123.000webhostapp.com/data.json')
        .then((response) => response.json())
        .then((responseJson) =>
        {
            this.setState({ dataSource: ds.cloneWithRows( responseJson ) }, () => { this.setState({ loading: false }) });
        })
        .catch((error) =>
        {
            console.error(error);
        });
    }

    clickedItemText( clickedItem )
    {
        this.props.navigation.navigate('Item', { item: clickedItem });
    }

    render()
    {
        return(
            <View style = { styles.container1 }>
            {
                (this.state.loading)
                ?
                    (<ActivityIndicator size = "large"/>)
                :

                    (<ListView style = {{ alignSelf: 'stretch' }}
                        dataSource = { this.state.dataSource }
                        renderRow = {( rowData ) =>
                            <TouchableOpacity style = { styles.item } activeOpacity = { 0.4 } onPress = { this.clickedItemText.bind( this, rowData ) }>
                                <Text style = { styles.text }>{ rowData.name.toUpperCase() }</Text>
                            </TouchableOpacity>
                        }
                        renderSeparator = {() =>
                            <View style = { styles.separator }/>
                        }
                        enableEmptySections = { true }/>)
            }
            </View>
        );
    }
}

class ClickedItem extends Component
{
    static navigationOptions = 
    {
        title: "Selected Item"
    };

    constructor(){
        super()
        this.state={
          hospital_id:"",
          Field2:"",
          Field3:"",
          Field4:"",
          Field5:"",
          Field6:"",
        }
      }


    render()
    {
        return(
            <View style = { styles.container2 }>
 <Text style = { styles.text }>You Selected: { this.props.navigation.state.params.item.name.toUpperCase() }</Text>

    <TextInput   style={styles.inputBox}
     underlineColorAndroid='rgba(0,0,0,0)'
      placeholder="Hospital Id"
      editable={false}
      placeholderTextColor="#000000"
      onChangeText={(hospital_id) => this.setState({hospital_id})}/>

   <TextInput   style={styles.inputBox}
     underlineColorAndroid='rgba(0,0,0,0)'
      placeholder="Field 2"
      secureTextEntry={false}
      placeholderTextColor="#000000"
      onChangeText={(Field2) => this.setState({Field2})}/>

<TextInput   style={styles.inputBox}
     underlineColorAndroid='rgba(0,0,0,0)'
      placeholder="Field 3"
      placeholderTextColor="#000000"
      onChangeText={(Field3) => this.setState({Field3})}/>

   <TextInput   style={styles.inputBox}
     underlineColorAndroid='rgba(0,0,0,0)'
      placeholder="Field 4"
      secureTextEntry={false}
      placeholderTextColor="#000000"
      onChangeText={(Field4) => this.setState({Field4})}/>

       <TextInput   style={styles.inputBox}
     underlineColorAndroid='rgba(0,0,0,0)'
      placeholder="Field 5"
      placeholderTextColor="#000000"
      onChangeText={(Field5) => this.setState({Field5})}/>

   <TextInput   style={styles.inputBox}
     underlineColorAndroid='rgba(0,0,0,0)'
      placeholder="Field 6"
      secureTextEntry={false}
      placeholderTextColor="#000000"
      onChangeText={(Field6) => this.setState({Field6})}/>

<TouchableOpacity style={styles.button}onPress={() => Insert(this.state.hospital_id,this.state.Field2,this.state.Field3,this.state.Field4,this.state.Field5,this.state.Field6)}>
          <Text style={styles.buttonText}>Insert</Text>
      </TouchableOpacity>
            </View>
        );
    }
}

export default App = StackNavigator(
{
    List: { screen: Inventory },
    Item: { screen: ClickedItem }
});


const styles = StyleSheet.create(
{
    container1:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },

    container2:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 15
    },

    item:
    {
        padding: 15
    },

    text:
    {
        fontSize: 18
    },

    separator:
    {
        height: 2,
        backgroundColor: 'rgba(0,0,0,0.5)'
    }
,
    inputBox:{
        width:300,
        borderColor: '#48BBEC',
        backgroundColor: '#F8F8FF',
        borderRadius:25,
        paddingHorizontal:16,
        fontSize:16,
        color:'#000000',
        marginVertical:10,


    },
    button:{
        width:300,
        backgroundColor:'#4169E1',
        borderRadius:25,
        marginVertical:10,
        paddingVertical:16
    },

    buttonText:{
    fontSize:16,
    fontWeight:'500',
    color:'#ffffff',
    textAlign:'center'

    }



});

//以下是我的App.js页面

import React from "react";
import Login from "./src/screens/Login";
import Inventory from "./src/screens/Inventory"
import SplashScreen from "./src/screens/SplashScree";

const AppNavigator = createStackNavigator({
  Home: {
    screen: SplashScreen,
    navigationOptions: { header: null } 
  },
  Login: Login,
  HomeScreen : HomeScreen,
  QRCodeGenerate :QRCodeGenerate,
    Inventory :Inventory,

},
{
  initialRouteName: "Home"
}
);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {

  render() {
    return <AppContainer />;
  }
}

谢谢

Answer 1

您缺少export类的Inventory语句，这是进行选择性导入所必需的。

在您的Inventory类下面添加以下内容，它应该可以正常工作。

export Inventory;

如何将选定的（ListView）值从一个屏幕传递到另一个屏幕

1 个答案: