Question

我一直在努力将值从一个组件传递到另一个组件。这是上一个问题的延续，该问题已得到部分解决：react-native tab navigator search box

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

index.js（呈现标签设置）

router.js

searchHeader.js

tab1.js

tab2.js

等

在index.js中，当更改选项卡时，我将获得选项卡的名称。我想将它传递给searchHeader.js以更新占位符文本。

由于searchHeader.js未导入index.js而不是直接子项，如何将其传递给该值？

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

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;

Answer 1

您可以使用setParams方法将其作为navigation prop传递。

另一种选择，取决于你的应用程序的范围，将是一个状态库，如Redux或MobX - 但如果它是一个小应用程序，它是过度杀伤

Answer 2

为此您可以使用Redux，您将拥有一个可以放置共享属性和值的商店，

然后您的组件可以连接到该商店，并使用所选的reducer和dispatch操作绑定其props。

Answer 3

这种结构可能有效：

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>
        )
    }
}

将原生传递道具反应到另一个组件

3 个答案: