1
나는 아직도 React Native에 조금 새로운 편이지만, 내가 원하는 방식으로 거의 응용하는 앱을 가지고있다. 나 App.jsTabBarIOS 구성 요소를 사용하여 화면 하단에 내 탭 탐색을 표시합니다. 당신이 탭을 터치하면 상태 업데이트와 관련된 내용이로드 표시됩니다반응 본래의 플럭스 라우터에 소품을 건네기.
App.js
import React, { Component } from 'react';
import { TabBarIOS, Platform, Image } from 'react-native';
import IconII from 'react-native-vector-icons/Ionicons';
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';
import Colors from './Colors';
import RouterItem1 from './routers/RouterItem1';
import RouterItem2 from './routers/RouterItem2';
import RouterHome from './routers/RouterHome';
import Settings from './components/Settings';
class FooterNav extends Component {
state = {
selectedTab: 'home',
};
handleClick = (routeData) => {
console.log('This has received data', routeData);
this.setState({ selectedTab: routeData });
console.log(this.state);
}
renderCurrentView() {
switch (this.state.selectedTab) {
case 'home':
return (
<RouterHome handleClick={this.handleClick} />
);
case 'item2':
return (
<RouterItem2 />
);
case 'item1':
return (
<RouterItem1 />
);
case 'settings':
return (
<Settings />
);
default:
return false;
}
}
render() {
return (
<TabBarIOS
unselectedTintColor={Colors.third} //Unselected labels
unselectedItemTintColor={Colors.third} //Unselected icons
tintColor={Colors.brandPrimary} //Selected
barTintColor={Colors.light} //Bar background
>
<IconII.TabBarItem
title="Home"
iconName="ios-home-outline"
selectedIconName="ios-home"
selected={this.state.selectedTab === 'home'}
receiveData={this.receiveData}
onPress={() => {
this.setState({
selectedTab: 'home',
});
}}
>
{this.renderCurrentView()}
</IconII.TabBarItem>
<TabBarIOS.Item
icon={require('./images/[email protected]')}
selectedIcon={require('./images/[email protected]')}
title="item2"
selected={this.state.selectedTab === 'item2'}
onPress={() => {
this.setState({
selectedTab: 'item2',
});
}}
>
{this.renderCurrentView()}
</TabBarIOS.Item>
<IconMCI.TabBarItem
title="item1"
iconName="cookie"
selectedIconName="cookie"
selected={this.state.selectedTab === 'item1'}
onPress={() => {
this.setState({
selectedTab: 'item1',
});
}}
>
{this.renderCurrentView()}
</IconMCI.TabBarItem>
<IconII.TabBarItem
title="More"
iconName="ios-more-outline"
selectedIconName="ios-more"
selected={this.state.selectedTab === 'settings'}
onPress={() => {
this.setState({
selectedTab: 'settings',
});
}}
>
{this.renderCurrentView()}
</IconII.TabBarItem>
</TabBarIOS>
);
}
}
module.exports = FooterNav;
react-native-router-flux은 훌륭한 플러그인입니다, 그것은 라우터에 끌어하면 흐름이 정확히 내가 원하는 것.
RouterHome.js
import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import styles from '../Styles';
import { content } from '../content.js';
import AnotherScene from '../components/pages/AnotherScene';
import Home from '../components/Home';
const RouterHomeComponent =() => {
return (
<Router
sceneStyle={styles.sceneStyle}
navigationBarStyle={styles.navBar}
titleStyle={styles.navBarTitle}
barButtonIconStyle={styles.barButtonIconStyle}
>
<Scene
key="Home"
component={Home}
title={content.heading}
hideNavBar
/>
<Scene
key="AnotherScene"
component={AnotherScene}
title='title'
hideNavBar={false}
/>
</Router>
);
};
export default RouterHomeComponent;
로드 기본보기가 <Home> 모듈입니다 : 내가 가진 유일한 문제는 <RouterHome> 모듈입니다
Home.js
import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Actions } from 'react-native-router-flux';
import styles from '../Styles';
import { content } from '../content.js';
class Home extends Component {
displayItem1 =() => {
this.props.handleClick('item1');
}
displayItem2 =() => {
this.props.handleClick('item2');
}
displayAnotherScene() {
Actions.AnotherScene();
}
render() {
return (
<View style={styles.viewWrapperHome}>
<Text style={styles.heading}>{content.greeting}</Text>
<TouchableOpacity onPress={this.displayItem1}>
<Text>First item</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.displayItem2}>
<Text>Second item</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.displayAnotherScene}>
<Text>Another scene</Text>
</TouchableOpacity>
</View>
);
}
}
export default Home;
그래서 내가 예상 한 것은 만약 th 사용자가 화면에 표시된 처음 두 버튼을 클릭하면 (First item/Second item) 소품이 App.js으로 다시 전달되면 상태가 변경되고 장면이 업데이트됩니다. 기본적으로 바닥 글 메뉴를 사용하지 않고 탐색하는 다른 방법입니다.
내가 추가하기 전에이 코드를 react-native-router-flux 모듈을 사용하지 않고도 사용할 수 있다는 것을 알고 있습니다. 문제는 실제로이 코드가 <Home> 모듈의 다른 페이지를 처리해야하는 것입니다.
아무도 내 App.js 라우터를 통해 소품을 다시 전달할 수있는 방법을 제안 할 수 있습니까?
'react-native-router-flux'을 사용하지 마십시오. 라이브러리는 사용되지 않는 코드를 기반으로하며 커뮤니티는 '반응 탐색'으로 천천히 전환 할 것입니다. 이제는'반응 네비게이션'도 완전한 해결책은 아니지만 대부분의 커뮤니티 관심을 끌 것입니다. – vonovak