将本机传递道具反应到另一个组件

问题描述

我一直在努力将值从一个组件传递到另一个组件.这是先前已部分解决的问题的延续:react-native tab navigator搜索框

I've been struggling passing a value from one component to another. It's a continuation of the issue from a previous question which was partially resolved: react-native tab navigator search box

我正在使用标签导航器，这是我的应用设置:

I'm using tab navigator and here's my app setup:

index.js(渲染选项卡设置)

index.js (renders tab setup)

router.js

searchHeader.js

     searchHeader.js

tab1.js

tab2.js

等

在 index.js 中，当一个选项卡被更改时，我得到了选项卡的名称.我想将其传递给 searchHeader.js 以更新占位符文本.

In index.js when a tab is changed I'm getting the name of the tab. I want to pass that to searchHeader.js to update the placeholder text.

由于 searchHeader.js 没有导入到 index.js 并且不是直接子级，我该如何传递该值?

As searchHeader.js isn't imported into index.js and not a direct child how do I pass it that value?

index.js

import React, { Component } from 'react';
import { Root, Tabs } from './config/router';
import { Alert,View } from 'react-native';

class App extends Component {


constructor(props) {
super(props);
 this.state = {
searchText: '',
 }
}

_getCurrentRouteName(navState) {

if (navState.hasOwnProperty('index')) {
    this._getCurrentRouteName(navState.routes[navState.index])
} else {
    if (navState.routeName==='One') {
        this.setState({searchText:'Search One'})
    }
    if (navState.routeName==='Two') {
        this.setState({searchText:'Search Two'})
    }
    if (navState.routeName==='Three') {

        this.setState({searchText:'Search Three'})
    }
    if (navState.routeName==='Four') {
        this.setState({searchText:'Search Four'})
    }
}

}
 render() {
return (
    <Root onNavigationStateChange={(prevState, newState) => {
        this._getCurrentRouteName(newState)
    }} />

    )


  }
}

export default App;

router.js

...

export const Root = StackNavigator({
 Tabs: {
screen: Tabs,
navigationOptions: {
header: <SearchHeader data={'Test'} />
  }
  },
}, {
  mode: 'modal',
});

searchHeader.js

searchHeader.js

import React, { Component } from 'react';
import { View,Text,Dimensions,Alert } from 'react-native';
import { SearchBar } from 'react-native-elements';

class SearchHeader extends Component {

  constructor(props) {
super(props);
     this.state = {
  placeholder: "Search One"
     }

}


render() {
  return (
<SearchBar
  noIcon
  containerStyle={{backgroundColor:'#fff'}}
  inputStyle={{backgroundColor:'#e3e3e3',}}
  lightTheme = {true}
  round = {true}
  placeholder={data}
  placeholderTextColor = '#000'
/>
  );
}

};

export default SearchHeader;

推荐答案

这个结构可能有效:

class Home extends Component {
    func(val) {
        this.setState({value: val});
    }
    render() {
        return (
            <View>
                <Two func={(val) => this.func(val)} />
            </View>
        )
    }
}

class Two extends Component {
    render() {
        return (
            <View>
                <Button title="set" onPress={() => this.props.func('data')} />
            </View>
        )
    }
}

这篇关于将本机传递道具反应到另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！