react

富文本编辑器，可以看看这个 http://margox.github.io/braft-editor/

react入门

react native，简称RN

路由导航组件：React Navigation (v2)

为React Native App提供路由和导航功能

特点

• 易于使用：使用内置的导航器可以快速启动，提供无缝的开箱即用体验。
• 为ios和android构建的组件：平台特有的外观和流畅的动画和手势。
• 完全可定制：如果你知道怎么用javascript写apps，你可以定制React Navigation的任何部分。
• 可扩展：在每个图层都可扩展，你可以编写自己的导航器，甚至 可以替换面向用户的API。

安装

npm install --save react-navigation
# or with npm
# yarn add react-navigation

相关概念

• TabNavigator：标签页
• StackNavigator：路由栈
• DrawerNavigator：抽屉

项目实际配置（这是旧版，新版api有所变化）

export const MainScreenNavigator = TabNavigator({
    IndexTab: {
        screen: IndexScreen
    },
    DataTab: { screen: SubStationListScreen },
    AlarmTab: { screen: AlarmStationsScreen },
    MineTab: { screen: MyInfoScreen }
}, {
        tabBarPosition: 'bottom',
        animationEnabled: true,
        tabBarOptions: {
            showIcon: true,
            style: {
                backgroundColor: '#fff',
            },
            labelStyle: {
                color: '#000'
            }
        },
        lazy: true,
        headerTintColor: 'black'
    }
)
//登陆页面跳转
export const LoginRout = StackNavigator({
    // 登录和主页
    LoginScreen: { screen: LoginScreen },
    RegisterScreen: { screen: RegisterScreen },
    MainScreenNavigator: { screen: MainScreenNavigator },

    AlarmListScreen: {screen: AlarmListScreen},
    // 数据标签，针对单个变电站的测温探头列表
    DeviceListScreen: { screen: DeviceListScreen },
    ChangePassword: { screen: ChangePassword },
    // 选择变电站
    ChooseStationScreen: { screen: ChooseStationScreen },
    ItemHistoryScreen: { screen: ItemHistoryScreen },
    //提示页面测试
    // MyInfoScreen: { screen: MyInfoScreen },
    PromptScreen: { screen: PromptScreen },
    //播放音频测试
    MyInfoScreen: { screen: MyInfoScreen }
}, {
        // initialRouteName: 'MainScreenNavigator',
        headerBackTitle: null,
        headerTintColor: '#333333'
});

界面文件命名方位为*Screen，如AlarmStationsScreen，在组件内部使用时，只要是在当前路由管理下的所有Screen都被自动注入navigation的prop，通过this.props.navigation即可获得。 比如要使用跳转，那么可以

class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;

    return (
      <View>
        <Text>This is the home screen of the app</Text>
        <Button
          onPress={() => navigate('Profile', { name: 'Brent' })}
          title="Go to Brent's profile"
        />
      </View>
    );
  }
}

转载于:https://my.oschina.net/u/3058876/blog/2208140