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

我一直在努力将一个组件的值传递给另一个组件。这是从以前的问题，这个问题这是部分解决的延续：react-native tab navigator search box 将本地传递道具反应到另一个组件

我使用的标签导航，这里是我的应用程序设置：

index.js（渲染选项卡设置）

路由器。 JS

searchHeader.js

tab1.js

标签2.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;

来源

2017-09-25 Pete Nice

一个代码示例将有所帮助。 – jdv

已添加代码 –

您可以使用Mobx（https://mobx.js.org）或Redux等状态管理库。如果应用程序很简单，Redux可能会矫枉过正。 –

也许你可以使用setParams方法把它作为一个navigation prop。

的替代，这取决于你的应用程序的范围，将是看一个国家图书馆，如终极版或MobX - 但如果它是一个小的应用程序，这是矫枉过正

来源

2017-09-25 15:22:27 jhm

是的，我试过setParams，但我不确定我是否以正确的方式进行，如果你能证明它在这个例子中的工作方式会有所帮助。我已经看过REDX，但我不确定我是否需要它来处理我正在做的事情。 –

所以我现在用MobX建立了一个简单的商店 - 这一切都很好。我遇到的问题是我仍处于相同的状况。呈现选项卡的根类是提供程序，并且设置存储无法编辑存储值，因为存储不可用。这是我必须抓住当前选项卡的名称。努力理解这应该如何工作。 –

对于您可以使用Redux，你将在那里你可以把共享的属性和值商店，

然后你的组件可以连接到存储和与所选择的减速（S）和行动派遣其绑定道具..

来源

2017-09-25 15:34:04

是的，这就是为什么我在看REDX –

这种结构可能工作：

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

来源

2017-09-25 18:57:58

这是将道具传递给子组件的正常方式，如果父组件正在渲染子组件但不是我拥有的结构。 –

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

回答

相关问题