猿问
下载APP

请问在react native 只能用 navigator 控制界面跳转吗?

react native 只能用 navigator 控制界面跳转吗


慕运维8079593
浏览 206回答 5
5回答

慕斯卡3215842

把子页面(Page.js)和TabNavigator(Tab.js)注册在同一个StackNavigator(ROUTE.js)下,TabNavigator(Tab.js)在第一个,Stacknavigator在第二个.项目进StackNavigator(ROUTE.js)直接按顺序先进入这个TabNavigator(Tab.js),在Tab内的某一个页面点击按钮的onPress事件让它调用navigate()函数进入一开始在ROUTE.js页面内和TabNavigator注册在一起的子页面Page.js内就好了,因为是和Tab.js平级的所以不会出现Tab导航栏。还有另一种方法网上搜的到,我就不说了,我觉得你需要的可能是我这种。

海绵宝宝撒

跳转的主要方法:1.component &nbsp;中添加这行代码<View style={styles.loginmain}><Text style={styles.logintext} onPress={() => navigator.push({name:'In'})}>注册</Text><Text style={styles.logintext} onPress={() => navigator.push({name:'Forget'})}>忘记密码 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</Text></View>onPress &nbsp;主要运用于点击事件中。2.在运行的主页面中只能运行如下的component &nbsp;const thunkMiddleWare = (store) => (next) => (action) => {if (typeof action === 'function') {return action(store.dispatch, store.getState)}return next(action)export default function () {return (<Provider store={createStore(reducer, applyMiddleware(thunkMiddleWare))}><NavigatorApp /></Provider>)}需要注意的是:a. middleware &nbsp; 是中间件的设置,它有固定的格式.<view/> &nbsp;不能包含<Navigator/>这个标签 &nbsp;但反过来可以。3.点击跳转的页面的设置代码function InComponent({navigator}){return (<View style={[styles.fullCenter,{backgroundColor:'#CCC',flex:1}]}><Text style={styles.size} onPress={() => navigator.pop()} >注册</Text></View>)}function ForgetComponent({navigator}){return (<View style={[styles.fullCenter,{backgroundColor:'#CCC',flex:1}]}><Text style={styles.size} onPress={() => navigator.pop()} >忘记密码</Text></View>)}export default class NavigatorApp extends Component {render() {return (<NavigatorinitialRoute={{name:'Main'}}renderScene={this.renderScene}navigationBar ={this.navigationBar}/>);}renderScene(route,navigator){if (route.name==="Main"){return <App &nbsp;navigator={navigator}/>}if (route.name==="In"){return <InComponent navigator={navigator}/>}if (route.name==="Forget"){return <ForgetComponent navigator={navigator}/>}if (route.name==='Nav'){return <NavComponent navigator={navigator} />}}// configureScene (route,navigator) {// &nbsp; &nbsp; return Navigator.SceneConfigs.FloatFromBottom// }总结:ReactNative结合了Web应用和Native应用的优势,可以使用JavaScript来开发iOS和Android原生应用。在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染等。

慕尼黑8549860

1.component 中添加这行代码<View style={styles.loginmain}><Text style={styles.logintext} onPress={() => navigator.push({name:'In'})}>注册</Text><Text style={styles.logintext} onPress={() => navigator.push({name:'Forget'})}>忘记密码 </Text></View>onPress 主要运用于点击事件中2.在运行的主页面中只能运行如下的componentconst thunkMiddleWare = (store) => (next) => (action) => {if (typeof action === 'function') {return action(store.dispatch, store.getState)}return next(action)export default function () {return (<Provider store={createStore(reducer, applyMiddleware(thunkMiddleWare))}><NavigatorApp /></Provider>)}需要注意的是:a. middleware 是中间件的设置,它有固定的格式.<view/> 不能包含<Navigator/>这个标签 但反过来可以3.点击跳转的页面的设置代码function InComponent({navigator}){return (<View style={[styles.fullCenter,{backgroundColor:'#CCC',flex:1}]}><Text style={styles.size} onPress={() => navigator.pop()} >注册</Text></View>)}function ForgetComponent({navigator}){return (<View style={[styles.fullCenter,{backgroundColor:'#CCC',flex:1}]}><Text style={styles.size} onPress={() => navigator.pop()} >忘记密码</Text></View>)}export default class NavigatorApp extends Component {render() {return (<NavigatorinitialRoute={{name:'Main'}}renderScene={this.renderScene}navigationBar ={this.navigationBar}/>);}renderScene(route,navigator){if (route.name==="Main"){return <App navigator={navigator}/>}if (route.name==="In"){return <InComponent navigator={navigator}/>}if (route.name==="Forget"){return <ForgetComponent navigator={navigator}/>}if (route.name==='Nav'){return <NavComponent navigator={navigator} />}}// configureScene (route,navigator) {// return Navigator.SceneConfigs.FloatFromBottom// }

梵蒂冈之花

//...<NavigatorddebugOverlay={false}initialRoute={{ title: 'Main', id:'http'}}configureScence={{ configureScence }}renderScene={renderSceneAndroid}/>var _navigator; //全局navigator对象//...renderSceneAndroid: function(route, navigator){_navigator = navigator;if(route.id === 'http'){return (<HttpView navigator={navigator} route={route} />);}if(route.id === 'shop'){return (<ShopView navigator={navigator} route={route}/>);}//...// 调用push 跳转<TouchableOpacity onPress={ () => _navigator.push({title:'Http',id:'http'}) } style={ styles.button }><Text>NetWork</Text></TouchableOpacity>

qq_花开花谢_0

首先使用react native编写一个简单的应用,在碰到问题的时候,肯定需要对代码进行调试。目前react native支持在Chrome浏览器内进行调试。需要选择Scheme->Run的选项为Debug,否则模拟器中不会出现调试选项。 将应用设置为在模拟器中运行,运行后
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答