为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕运维8079593 2019-08-20 18:14:41

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


查看完整描述

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导航栏。
还有另一种方法网上搜的到,我就不说了,我觉得你需要的可能是我这种。

查看完整回答
反对 回复 2019-08-24
?
海绵宝宝撒

跳转的主要方法:

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.在运行的主页面中只能运行如下的component  

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   是中间件的设置,它有固定的格式.
<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 (

<Navigator
initialRoute={{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
// }

总结:

ReactNative结合了Web应用和Native应用的优势,可以使用JavaScript来开发iOS和Android原生应用。在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染等。



查看完整回答
反对 回复 2019-08-24
?
慕尼黑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.在运行的主页面中只能运行如下的component

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 是中间件的设置,它有固定的格式.
<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 (

<Navigator
initialRoute={{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
// }



查看完整回答
反对 回复 2019-08-24
?
梵蒂冈之花

//...
<Navigator
ddebugOverlay={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>



查看完整回答
反对 回复 2019-08-24
?
qq_花开花谢_0

首先使用react native编写一个简单的应用,在碰到问题的时候,肯定需要对代码进行调试。目前react native支持在Chrome浏览器内进行调试。需要选择Scheme->Run的选项为Debug,否则模拟器中不会出现调试选项。 将应用设置为在模拟器中运行,运行后

查看完整回答
反对 回复 2019-08-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信