如何将道具从一个组件传递到另一组件？ （反应本机）

Question

我有一个用于标签视图的自定义组件，通过它可以制作动态标签，下面是它的代码。

sudo npm install -g 是制作这些自定义标签的自定义标签，TabView是单个标签的组成部分。

如何将道具从Selected组件发送到TabView组件？

我知道如何在常规情况下发送道具，但在这种情况下我不知道发送道具。

我通过以下链接制作了此组件：

https://medium.com/@abdelhalim.ahmed95/how-to-create-scrollable-and-dynamic-top-tabsbar-using-react-navigation-17ca52acbc51

Selected

Answer 1

使用以下代码，

       val[tab] = {
                    screen: () => (<Selected val={val}/>) //in case if you want to send val as props
                  }

您的最终代码将是

export class TabView extends Component {

        Tabs = navigation => {

        let tabs=['A', 'B', 'C', 'D','E','F','G','H'];

        tabs = tabs.reduce((val, tab) => {

              val[tab] = {
                screen: () => (<Selected val={val}/>), // for props
                navigationOptions: {
                   title: 'Shows' // send anything here to get in navigationOptions
                },
              }
              return val
        }, {})

        const bottomTabs = createMaterialTopTabNavigator(
              {
                ...tabs
              },
              {
                tabBarOptions: {
                  style: {
                    backgroundColor: Themes.colors.FC_PRIMARY,
                  },
                  indicatorStyle:{
                      height: 2,
                      backgroundColor: Themes.colors.TC_PRIMARY_LIGHT,
                  },
                }
              }
            )

            const Tabs = createAppContainer(bottomTabs);

            return <Tabs />
      }


      render() {

        const { navigation } = this.props;

        return (
            <View style={STYLES.tabView}>
                {this.Tabs(navigation)}
            </View>
        );
      }
    }


    export class Selected extends Component {

        constructor(props){
            super(props);
            this.state = {
              screen: '',
              screenType: this.props.type
            }
        }


        static navigationOptions = ({ navigation, navigationOptions }) => {

              return({
                tabBarLabel: ({ focused }) => (

                     <View>        
                          <View style={STYLES.secondaryTabLabel}>
                             <H3 
                              type={ focused ? "light" : "disabled" } 
                              text={navigationOptions.title} // use here 
                             />
                          </View>
                     </View>

                )
              })

        };

          screenIs = payload => {
            this.setState({ screen: payload.state.routeName })
          }

      render() {

        const { navigation } = this.props;

        return (

          <View style={{flex: 1}}>

            <NavigationEvents onWillFocus={this.screenIs} />

            <Text>{this.state.screen}</Text>

          </View>

        );
      }
    }