import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
Image
} from 'react-native';
import First from './First';
export default class Home extends Component{
navSecond(){
this.props.navigator.push({
id: 'First',
title: 'First',
name: 'First',
component: First
})
}
render(){
return(
<View>
<View style={{height:220,backgroundColor:'#DCDCDC'}}>
<Image style={{width:120,height:120,top:50,left:120,backgroundColor:'red'}}
source={require('./download.png')} />
</View>
<View style={{top:30}}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<TouchableOpacity style= { styles.views} onPress={this.navSecond.bind(this)}>
<Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Profile </Text>
</TouchableOpacity>
<TouchableOpacity style= { styles.views1} >
<Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Health Tracker </Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<TouchableOpacity style= { styles.views2} >
<Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Medical Care </Text>
</TouchableOpacity>
<TouchableOpacity style= { styles.views3} >
<Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Alerts </Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<TouchableOpacity style= { styles.views4} >
<Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Health Topics </Text>
</TouchableOpacity>
<TouchableOpacity style= { styles.views5} >
<Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> My Documents </Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
В этом коде мне нужно перейти к First.js с помощью push, но я не могу этого сделать. Нажимая на Profile, он должен перейти к First.js, здесь работает push(), но это не переход к First.js. Вышеуказанная страница, которую я установил как начальный маршрут, как я могу связать со всеми страницами?React-native pushing другому классу
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity
} from 'react-native';
import Home from './Home';
export default class Prof extends Component{
constructor(){
super()
}
render(){
return (
<Navigator
initialRoute = {{ name: 'Home', title: 'Home' }}
renderScene = { this.renderScene }
navigationBar = {
<Navigator.NavigationBar
style = { styles.navigationBar }
routeMapper = { NavigationBarRouteMapper } />
}
/>
);
}
renderScene(route, navigator) {
if(route.name == 'Home') {
return (
<Home
navigator = {navigator}
{...route.passProps}
/>
)
}
}
}
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(index > 0) {
return (
<View>
<TouchableOpacity
onPress = {() => { if (index > 0) { navigator.pop() } }}>
<Text style={ styles.leftButton }>
Back
</Text>
</TouchableOpacity>
</View>
)
}
else { return null }
},
RightButton(route, navigator, index, navState) {
if (route.openMenu) return (
<TouchableOpacity
onPress = {() => route.openMenu() }>
<Text style = { styles.rightButton }>
{ route.rightText || 'Menu' }
</Text>
</TouchableOpacity>
)
},
Title(route, navigator, index, navState) {
return (
<Text style = { styles.title }>
{route.title}
</Text>
)
}
};
Спасибо @Ataomega .. я постараюсь с вышеизложенным код – Prasanna
@PrasannaKumarKulkarni Добро пожаловать. комментарий и тег здесь, если у вас есть дополнительные вопросы относительно RN Router Flux. – Ataomega
'undefined' не является объектом (оценка '_reactnative Router'Flux2.default'.First') Я получаю эту ошибку. – Prasanna