Question

我使用'react-native-tabs'中的Tabs从一个屏幕导航到另一个屏幕，我如何将道具发送到标签的各个组件？

我使用以下代码显示标签

    import Tabs from 'react-native-tabs';
    <Tabs
      selected={page}
      style={styles.tabbar}
      selectedStyle={{color:'black'}}
      onSelect={el=>this.setState({page:el.props.name})}
       >
        <Text style={styles.tabbarText} name={Contact}>Contact</Text>
        <Text style={styles.tabbarText} name={Messages}>Messages</Text>
        <Text style={styles.tabbarText} name={Profile}>Profile</Text>
    </Tabs>

Answer 1

我想通了，你可以在

中提到道具

<this.state.page style={styles.pageContainer} navigator={this.props.navigator}/>

代码行。

整个render（）函数在这里，

render() {
    const { page } = this.state;    
    return (
      <View style={styles.container}>
        <this.state.page style={styles.pageContainer} navigator={this.props.navigator}/>
        <Tabs
          selected={page}
          style={styles.tabbar}
          selectedStyle={{color:'black'}}
          onSelect={el=>this.setState({page:el.props.name})}
        >
            <Text style={styles.tabbarText} name={Contact}>Contact</Text>
            <Text style={styles.tabbarText} name={Messages}>Messages</Text>
            <Text style={styles.tabbarText} name={Profile}>Profile</Text>
        </Tabs>

      </View>
    );
  }

Answer 2

这可能会对您有所帮助。

class Home2Screen extends React.Component {
  render() {
    console.log(this.props.navigation.state);
    return (
      <View>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    console.log(this.props.navigation.state);
    return (
      <View>
      </View>
    );
  }
}

const tab =  TabNavigator(
  {
    Home2: { screen: Home2Screen },
    Settings: { screen: SettingsScreen },
  },
  {}
);

class HomeScreen extends React.Component {
 goToTab() {
      this.props.navigation.navigate('Tab', {
        carData: {some: 'data'},
      });
}

  render() {
    return (
      <View>
       <Button onPress={() => { this.goToTab() }}  />
      </View>
    );
  }
}

const HomeNavigator = StackNavigator({
    Home: {
        screen: HomeScreen,
    },
    Tab: {
      screen: tab,
    },
}, {
    mode: Platform.OS === 'ios' ? 'modal' : 'card',
});

const HomeNavigationDrawer = DrawerNavigator({
    HomePage: {
        screen: HomeNavigator,
    },
}, {});

export default HomeNavigationDrawer;

使用来自'react-native-tabs'的标签发送道具

2 个答案: