0

我在index.android.js中初始化了一个Navigator,底部有4个按钮,点击不同的按钮切换场景,现在碰到的问题是,滑动切换场景滑动到一半就消失了,不知道到是不是我布局的问题,下面附上代码和App界面的截图,请大神帮忙看下。

1.index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  Image,
  Button,
  Alert,
  Navigator
} from 'react-native';

import Constants from './js/constants';
import Page01 from './js/page01';
import Page02 from './js/page02';
import Page03 from './js/page03';
import Page04 from './js/page04';

export default class RNApp extends Component {
  // 构造器
  constructor(props) {
    super(props)
    this.state = {
      textInputName: '',
      textInputPwd: '',
      loginResult: 0,
      btnId: 0,
    }
  };

  onTabItemPress = (itemId) => {
      this.state.navigator.push({
          name: itemId,
          type:"Normal"
      });
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={{flex:1}}>
            <Navigator
                initialRoute={{ id: 0, type: 'Normal', index: 0 }}
                /**
                 * 配置场景动画
                 * @param route 路由
                 * @param routeStack 路由栈
                 * @returns {*} 动画
                 */
                configureScene={
                    (route, navigator) => {
                        if (route.type == 'Bottom') {
                            return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
                        }
                        return Navigator.SceneConfigs.PushFromRight; // 右侧弹出
                    }
                }
                /**
                 * 渲染场景, 通过不同参数, 设置不同页面
                 * @param route 路由, 场景信息
                 * @param navigator 导航器
                 * @returns {XML} 页面
                 */
                renderScene={
                (route, navigator) => {
                    this.state.router = route;
                    this.state.navigator = navigator;
                    switch (route.id) {
                      case 0:
                          return <Page01/>;
                          break;
                      case 1:
                          return <Page02/>;
                          break;
                      case 2:
                          return <Page03/>;
                          break;
                      case 3:
                          return <Page04/>;
                          break;
                    }
                }
            }
            />
        </View>
        <View style={styles.tabView}>
            <View style={styles.tabItem}>
                <Text onPress={() => this.onTabItemPress(0)}>首页</Text>
            </View>
            <View style={styles.tabItem}>
                <Text onPress={() => this.onTabItemPress(1)}>通讯录</Text>
            </View>
            <View style={styles.tabItem}>
                <Text onPress={() => this.onTabItemPress(2)}>发现</Text>
            </View>
            <View style={styles.tabItem}>
                <Text onPress={() => this.onTabItemPress(3)}>我</Text>
            </View>
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
  tabView: {
      flexDirection:"row",
      alignItems:"center",
      height:50,
      backgroundColor:"#f0f0f0",
      borderTopWidth:0.5,
      borderTopColor:"#999"
  },
  tabItem: {
      flex:1,
      alignItems:"center",
      justifyContent:"center",
      height:50
  }
});

AppRegistry.registerComponent('RNApp', () => RNApp);

2.page01.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';

export default class Page01 extends Component {
    render() {
        return (
            <View>
                <View style={styles.header}>
                    <Text style={styles.headTitle}>首页</Text>
                </View>
                <View>
                    <Text>首页的内容区域</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    header: {
        height: 50,
        backgroundColor: '#12B7F5',
        justifyContent: 'center',
    },
    headTitle: {
        alignSelf: 'center',
        fontSize: 20,
        color: '#ffffff',
    }
});

3.page02.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';

export default class Page02 extends Component {
    render() {
        return (
            <View>
                <View style={styles.header}>
                    <Text style={styles.headTitle}>通讯录</Text>
                </View>
                <View>
                    <Text> </Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    header: {
        height: 50,
        backgroundColor: '#12B7F5',
        justifyContent: 'center',
    },
    headTitle: {
        alignSelf: 'center',
        fontSize: 20,
        color: '#ffffff',
    }
});

下面是APP界面,3张图,分别是首页,和点击切'通讯录'换场景过度界面,和最终切换后的界面



1个回答

0

在给 state 中的参数赋值的时候,不能直接使用

this.state.route = route;
this.state.navigator = navigator;

而是要使用

this.setState({
    route: route,
    navigator: navigator
})

通过看这段代码发现了一个问题,但是是不是因为这个问题导致的并不确定,如果你想要在这个 RNApp 父组件内使用 Navigator 的 navigator props,请使用 ref 属性:

<Navigator
    // 使用 ref 来获取 Navigator 的实例
    ref={ (nav) => this.nav = nav }
    // ...
    /**
     * 配置场景动画
     * @param route 路由
     * @param routeStack 路由栈
     * @returns {*} 动画
     */
    
    /**
     * 渲染场景, 通过不同参数, 设置不同页面
     * @param route 路由, 场景信息
     * @param navigator 导航器
     * @returns {XML} 页面
     */
}
/>

然后就可以直接使用:

this.nav.navigator.push({
    name: itemId,
    type: "Normal"
})

替换

this.state.navigator.push({
    name: itemId,
    type: "Normal"
});

撰写答案