Question

我正在玩创建一个跟踪工单的反应原生应用。我有一个主屏幕，作为工作人员的提要，从config / data.js文件中获取数据。我希望能够点击一个工单并将其转到显示键＃和工作顺序名称的屏幕，但目前只在我的onLearnMore函数中使用硬编码参数。

这是我的Home.js文件：

import React, { Component } from "react";
import { ScrollView, Text, View } from "react-native";
import { Card, Button } from "react-native-elements";
import { workOrders } from "../config/data";

class Home extends Component {
onLearnMore = (workOrders) => {
    this.props.navigation.navigate('WorkOrder', { key: 1, name: "Job 1"});
};

render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView contentContainerStyle={{ paddingVertical: 20 }}>
          {workOrders.map(({ key, name }) => (
            <Card title={`Work Order ${key}`} key={key}>
              <Text style={{ marginBottom: 10 }}>
                {name}.
              </Text>
              <Button
                backgroundColor="#03A9F4"
                title="VIEW NOW"
                onPress={() => this.onLearnMore(workOrders)}
              />
            </Card>
          ))}
        </ScrollView>
      </View>
    );
}
}

export default Home;

这是我的WorkOrder.js文件：

import React, { Component } from "react";
import { View, Navigator, ScrollView } from "react-native";
import { Card, Button, Text, List, ListItem } from "react-native-elements";
import { isSignedIn } from "../auth";

class WorkOrder extends Component {
render() {
    const{ key, name } = this.props.navigation.state.params;

    return(
        <ScrollView>
            <List>
                <ListItem
                    title="Key"
                    rightTitle={'$key'}
                    hideChevron
                />
                <ListItem
                    title="Name"
                    rightTitle={'$name.toUpperCase()'}
                    hideChevron
                />
            </List>
        </ScrollView>
    );
}
}

export default WorkOrder;

最后我的router.js文件，如果有帮助：

import React from "react";
import { Platform, StatusBar } from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import { FontAwesome } from "react-native-vector-icons";

import SignUp from "./screens/SignUp";
import SignIn from "./screens/SignIn";
import Home from "./screens/Home";
import Profile from "./screens/Profile";
import WorkOrder from "./screens/WorkOrder";

const headerStyle = {
 marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
};

export const SignedOut = StackNavigator({
 SignUp: {
 screen: SignUp,
 navigationOptions: {
    title: "Sign Up",
    headerStyle
 }
},
SignIn: {
   screen: SignIn,
   navigationOptions: {
      title: "Sign In",
      headerStyle
  }
 },
});

export const FeedStack = StackNavigator ({
    Home: {
        screen: Home,
        navigationOptions: {
           title: 'Home',
       }
    },
    WorkOrder: {
       screen: WorkOrder,
       navigationOptions: ({ navigation }) => ({
          title: '${navigation.state.params.name}',
      }),
  },
});

   export const SignedIn = TabNavigator(
     {
       Home: {
         screen: FeedStack,
         navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: ({ tintColor }) =>
          <FontAwesome name="home" size={30} color={tintColor} />
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: "Profile",
        tabBarIcon: ({ tintColor }) =>
          <FontAwesome name="user" size={30} color={tintColor} />
      }
    },

  },
  {
    tabBarOptions: {
      style: {
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
      }
    }
  }
);

export const createRootNavigator = (signedIn = false) => {
  return StackNavigator(
    {
      SignedIn: {
        screen: SignedIn,
        navigationOptions: {
          gesturesEnabled: false
        }
      },
      SignedOut: {
        screen: SignedOut,
        navigationOptions: {
          gesturesEnabled: false
        }
      }
    },
    {
      headerMode: "none",
      mode: "modal",
      initialRouteName: signedIn ? "SignedIn" : "SignedOut"
    }
  );
};

我是反应原生的新手，并且已经使用了很多不同的教程来达到这一点。我还有一个github repo与这段代码，如果它有帮助： https://github.com/ryanseery/reactNativeBoilerPlate.git

非常感谢任何帮助。

Answer 1

我已经通过将单个工作单映射到orderDetail对象然后将这些参数推送到下一页来解决了这个问题。如果有人有兴趣，请参阅下面的代码。

import React, { Component } from "react";
import { ScrollView, Text, View } from "react-native";
import { Card, Button } from "react-native-elements";
import { workOrders } from "../config/data";

class Home extends Component {
onLearnMore = (orderDetail) => {
    this.props.navigation.navigate('WorkOrder', { ...orderDetail });
};

render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView contentContainerStyle={{ paddingVertical: 20 }}>
          {workOrders.map((orderDetail) => (
            <Card title={`Work Order ${orderDetail.key}`}>
              <Text style={{ marginBottom: 10 }}>
                {orderDetail.name}.
              </Text>
              <Button
                backgroundColor="#03A9F4"
                title="VIEW NOW"
                onPress={() => this.onLearnMore(orderDetail)}
              />
            </Card>
          ))}
        </ScrollView>
      </View>
    );
   }
  }

   export default Home;

没有在堆栈导航器中传递参数

1 个答案: