RN - Navigator

Posted on   |   In ,

入门感受

  • 用 react-native init 创建项目很方便 (关键是 mac)
  • 基本 react 知识可以直接应用
  • 组件库缺乏
  • inline style

第一个小难题 Navigator

基本组件直接写 react 组件就好了,但都是单独个体,抛去组件样式类型的不完善外,就是没有 react-router 那么方便的路由工具
可能是因为更新了最新的 0.43 原因,部分 navigator 组件都出现各种报错
最后选择了

“react-navigation”: “git+https://github.com/react-community/react-navigation.git#7edd9a7"

基本用法

Stack

const defaultHeader = {
  tintColor: "white",
  style: {
    backgroundColor: "#36374c"
  },
  titleStyle: {
    color: "white"
  }
}

const App = StackNavigator({
  Intro: {
    screen: Intro,
    navigationOptions: {
      header: {
        visible: false,
        style: {
          display: "none"
        }
      }
    }
  },
  Home: {
    screen: Home,
    navigationOptions: {
      title: "分贝通",
      header: {
        ...defaultHeader
      }
    }
  },
  WebView: {
    screen: WebView
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      title: "登录",
      header: {
        ...defaultHeader,
        backTitle: null
      }
    }
  },
  FlightSearch: {
    screen: FlightSearch,
    navigationOptions: {
      title: "预定机票",
      header: {
        ...defaultHeader,
        backTitle: null
      }
    }
  }
})
  • screen 就是相应的组件
  • navigationOptions 里可以配置一些头部信息

Tab

const HomeTabs = TabNavigator(
  {
    Services: {
      screen: Services
    },
    Approval: {
      screen: Approval
    },
    Orders: {
      screen: Orders
    },
    My: {
      screen: My
    }
  },
  {
    tabBarOptions: {
      activeTintColor: "#f4a442"
    }
  }
)

也可以在组件里配置 navigationOptions
特别是对 tab 的 icon

static navigationOptions = {
    tabBar: {
        label: '服务',
        icon: ({tintColor}) => (<Image
            source={require('../../img/tab_ic_service_nor.png')}
            style={[
            myStyles.icon, {
                tintColor: tintColor
            }
        ]}/>)
    }
}

screen 对应的组件里可以从 props 里拿到一个 navigation,用来触发相关跳转

goWebView(url) {
        const {navigate} = this.props.navigation;
        navigate('WebView', {url})
    }

这里是跳转到 ‘WebView’ 组件,并传递 url 参数

render() {
        const {state} = this.props.navigation;
        return (<WebView source={{
            uri: state.params.url
        }}/>);
    }

获取 navigator 带入的参数

reset

this.resetAction = NavigationActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: "Home" })]
})

xxxxxxxx

navigation.dispatch(this.resetAction)

跳转并清空历史