Question

我有一个列出客户项目的平面列表。当我按下每个项目时，它将导航到主屏幕选项卡，其中包含3个选项卡屏幕：

客户信息
客户当前地址
客户的帐单邮寄地址。

这3个屏幕从不同的API获取数据，但取决于客户ID。如何将平面列表键传递到这些屏幕，以便显示来自任何API的数据？

此处是我的代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Dimensions} from 'react-native';

const deviceW = Dimensions.get('window').width

const basePx = 768

function px2dp(px) {
  return px *  deviceW / basePx
}

class Info extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
        Customer info:_____
        </Text>
      </View>
    )
  }
}

class currentadd extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          current address is:_____
        </Text>
      </View>
    )
  }
}

class billingadd extends Component {
    render() {
      return (
        <View style={styles.container}>
          <Text style={styles.welcome}>
            Billing address is:_____
          </Text>
        </View>
      )
    }
  }


export default class CustomerDetail extends Component {

  static navigationOptions = ({ navigation }) => {
    return {
      title: `${navigation.state.params.custid}`,
    }
  };


  state= {
    selectedTab: 'info'
  }; 

  render() {
    return (
      <TabNavigator style={styles.container}>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'info'}
          title="Customer General Info"
          selectedTitleStyle={{color: "#3496f0"}}
          renderIcon={() => <Icon name="user" size={px2dp(22)} color="#666"/>}
          renderSelectedIcon={() => <Icon name="user" size={px2dp(22)} color="#3496f0"/>}
          onPress={() => this.setState({selectedTab: 'info'})}>
          <Info />
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'currentadd'}
          title="current address"
          selectedTitleStyle={{color: "#3496f0"}}
          renderIcon={() => <Icon name="usd" size={px2dp(22)} color="#666"/>}
          renderSelectedIcon={() => <Icon name="home" size={px2dp(22)} color="#3496f0"/>}
          onPress={() => this.setState({selectedTab: 'currentadd'})}>
          <currentadd/>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'billingadd'}
          title="billing address"
          selectedTitleStyle={{color: "#3496f0"}}
          renderIcon={() => <Icon name="usd" size={px2dp(22)} color="#666"/>}
          renderSelectedIcon={() => <Icon name="phone" size={px2dp(22)} color="#3496f0"/>}
          onPress={() => this.setState({selectedTab: 'billingadd'})}>
          <billingadd/>
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}
...stylesheet here

提前谢谢。

Answer 1

我认为您可以在您的应用程序中应用以下示例，主要思想是将对象（ID）的标识符发送给其他子对象，因此为了做到这一点，您可以在操作时捕获此ID在您的组件上执行，例如：

class Decks extends Component { 
   render () {

        const { decks } = this.props;

        return (
            <View>
                {Object.keys(decks).map((key) => {
                    return (
                        <View key={key} style={styles.deck}>
                            <TouchableOpacity onPress={() => this.props.navigation.navigate('DeckProfile', { 
                                title: decks[key].title
                                })}>
                            </TouchableOpacity>
                        </View>
                    )
                })}
          </View>
        )
    }
}

所以，在＆＃39;导航＆＃39;功能被发送到此时将显示的组件以执行按下操作，并且还将发送主组件的ID（在这种情况下为标题＆＃39;）。根据之前使用的参数，在MainNavigator中需要定义它，在这种情况下＆＃39; title＆＃39;：

const MainNavigator = StackNavigator({

  DeckProfile: {
    screen: DeckProfile,
    navigationOptions: ({navigation}) => ({
      title: navigation.state.params.title,
      headerTintColor: white,
      headerStyle: {
        backgroundColor: lightPurp,
      }
    })
  }

Answer 2

:)，Okey，所以你在'CustomerDetail'屏幕上有'custid'并且标签屏幕需要获取这些信息（custid），为了传递这些信息，你可以使用this.props.navigation.state.params.title（在你的情况下可能是'custid'而不是'title'），流程看起来像这样：

CustomerList.js组件：

class CustomerList extends Component { 
   render () {

        const { customers } = this.props;

        return (
            <View>
                {Object.keys(customers).map((key) => {
                    return (
                        <View key={key} style={styles.customer}>
                            <TouchableOpacity onPress={() => this.props.navigation.navigate('CustomerDetail', { 
                                custid: customers[key].custid
                                })}>
                            </TouchableOpacity>
                        </View>
                    )
                })}
          </View>
        )
    }
}

App.js组件：

const MainNavigator = StackNavigator({

  CustomerDetail: {
    screen: CustomerDetail,
    navigationOptions: ({navigation}) => ({
      custid: navigation.state.params.custid,
      headerTintColor: white,
      headerStyle: {
        backgroundColor: lightPurp,
      }
    })
  }

CustomerDetail.js组件：

类CustomerDetail扩展了Component {

render () {
    const { customers } = this.props;
    let custid = this.props.navigation.state.params.custid;

    return(
        <TabNavigator style={styles.container}>
           <TabNavigator.Item
            title={customers[custid].name}
           </TabNavigator.Item>
        </TabNavigator>
    )
}

Answer 3

App.js

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { StackNavigator } from 'react-navigation';

import Login from './src/components/Login';
import Home from './src/components/Home';
import Dashboard from './src/components/Dashboard';
import Customer from './src/components/Customer';
import CustomerDetail from './src/components/CustomerDetail';

const MyApp = StackNavigator(

    {
      Login: {
        screen: Login,
        navigationOptions: {
          header: null
        },
      },
      Home: {
        screen: Home,
        navigationOptions: {
          header: null
        },
      },
      Dashboard: {
        screen: Dashboard,
        navigationOptions: {
          title: 'Dashboard'
        },
      },
      Customer: {
        screen: Customer,
        navigationOptions: {
          title:'List of customers'
        }
      },
      CustomerDetail: {
        screen: CustomerDetail,
        navigationOptions: {
          title:'Customer Detail'
        }
      }
    });

export default class App extends React.Component {
  render() {
    return (
      <MyApp />
    );
  }
}

Answer 4

Customer.js

bat2_move_left = False
bat2_move_right = False
bat1_move_left = False
bat1_move_right = False

while running:

    for event in pygame.event.get():
        if event.type == pygame.QUIT():
            running = False
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_LEFT: # 276
                bat2_move_left = True
            if event.key == pygame.K_RIGHT: # 275
                bat2_move_right = True
            if event.key == pygame.K_a: # 97
                bat1_move_left = True
            if event.key == pygame.K_d: # 100
                bat1_move_right = True
        if event.type == pygame.KEYUP:
            if event.key == pygame.K_LEFT: # 276
                bat2_move_left = False
            if event.key == pygame.K_RIGHT: # 275
                bat2_move_right = False
            if event.key == pygame.K_a: # 97
                bat1_move_left = False
            if event.key == pygame.K_d: # 100
                bat1_move_right = False

    # --- after events ---

    if bat2_move_left:
        bat2.rect.x -= 2
    if bat2_move_right:
        bat2.rect.x += 2
    if bat1_move_left:
        bat1.rect.x -= 1
    if bat1_move_right:
        bat1.rect.x += 1

Answer 5

SearchBar.js

import React, { Component } from 'react';
import { View, TextInput } from 'react-native';
import { Button } from 'react-native-elements';

class SearchBar extends Component {
  state = { term: '' };

  render() {
    const {
      containerStyle,
      searchTextStyle,
      buttonStyle
    } = styles;

    return (
      <View style={containerStyle}>
        <TextInput
          style={searchTextStyle}
          underlineColorAndroid='transparent'
          placeholder='Search'
          onChangeText={term => this.setState({ term })}
          value={this.state.term}
          autoFocus={ true }
        />
        <Button
          buttonStyle={buttonStyle}
          icon={{name: 'search', size: 24}}
          title={this.props.loading ? 'Searching...' : 'Search'}
          onPress={() => this.props.onPressSearch(this.state.term)}
        />
      </View>
    );
  }
}

const styles = {
  containerStyle: {
    marginTop: 25,
    marginLeft: 10,
    marginRight: 10,
    flexDirection: 'row',
    backgroundColor: 'transparent'
  },
  searchTextStyle: {
    flex: 1,
    borderBottomWidth: 1,
    borderBottomColor: '#BE3A31'
  },
  buttonStyle: {
    height: 30,
    marginBottom: 8,
    backgroundColor: '#BE3A31'
  }
};


export default SearchBar;

Answer 6

当然，您有以下情况：'CustomerDetail'组件有三个选项卡，需要从'CustomerDetail'父组件获取'custid'，因此'CustomerDetail'组件必须知道此信息，以便要做到这一点，你已经创建了'App.js'组件，你已经将'CustomerDetail'定义为StackNavigator，'CustomerDetail'组件获取此信息，只需输入以下代码行：

<强> BEFORE

CustomerDetail: {
        screen: CustomerDetail,
        navigationOptions: {
          title:'Customer Detail'
        }
      }

<强> AFTER

CustomerDetail: {
    screen: CustomerDetail,
    navigationOptions: ({navigation}) => ({
      title:'Customer Detail',
      custid: navigation.state.params.custid
    })
  }

现在，您可以通过以下行从“CustomerDetail”组件中获取子标签中的'custid'信息：

class CustomerDetail extends Component {

render () {
    const { customers } = this.props;
    let custid = this.props.navigation.state.params.custid;

    return(
        <TabNavigator style={styles.container}>
           <TabNavigator.Item
            title={customers[custid].name}
           </TabNavigator.Item>
        </TabNavigator>
    )
}

将本机平面列表复制到选项卡屏幕

6 个答案: