富文本编辑器,可以看看这个 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>
);
}
}