1、基本语法
1-1 hello world
//要使用标签,第一步必须导入
import React, { Component } from 'react';
import { Text, View,Button} from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<Text>Hello, world!</Text>
<Button
color="#ff2d51"
title="btn"/>
</View>
);
}
}
1-2 Image
//网络图片
<Image source={{uri:"xxx"}}>
//Tips:图片相关的资源一定要夹样式width,height
//本地图片
<Image source={require('./assets/bg.jpg')}/>
1-3 样式
import React, { Component } from 'react';
import { Text, View,StyleSheet} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
//给多个style
<Text style={[styles.txt,styles.bg]} >hello</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
backgroundColor:"red",
width:200,
height:200
},
txt:{
color:"blue"
},
bg:{
backgroundColor:"#fff"
}
})
1-4 Dimensions
import { Dimensions } from 'react-native';
const { width, height,scale} =Dimensions.get('window');
1-5 布局
//react-native中默认view就是flex布局
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.child}></View>
<View style={styles.child}></View>
<View style={styles.child}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width:400,
height:400,
backgroundColor:"red",
flexDirection:"row",
justifyContent:"space-around",
alignItems:"center"
},
child:{
width:100,
height:100,
backgroundColor:"blue"
}
})
1-6 调试
1.夜神模拟器
2.android studios
3.真机调试
1-7 transform
transform:[{translate:[-50,-50]}]
// transform:[{translateX:-50},{translateY:-50}]
1-8、FlatList
<FlatList style={styles.item}
data={this.state.musics}
// horizontal={true}
renderItem={({ item }) => <View>
<Image style={styles.img} source={{uri:item.coverImgUrl}}/>
<Text style={styles.name}>{item.name}</Text>
</View>}
/>
2、事件
<Button
title="btn"
onPress={()=>{
Alert.alert("good")
}}
></Button>
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Button
title="btn"
onPress={this.handleClick}
></Button>
</View>
);
}
handleClick=()=>{
Alert.alert("good")
}
}
3、Http请求
componentDidMount() {
// ctrl+shift+j
var url = "http://192.168.14.15:5000/dj/program?rid=336355127"
fetch(url).then(res => res.json()).then(resJson => {
console.log(resJson.programs)
this.setState({
movies: resJson.programs
})
})
}
//支持async await
async componentDidMount() {
// ctrl+shift+j
var url = "http://192.168.14.15:5000/dj/program?rid=336355127"
var data = await fetch(url);
var resJson = await data.json();
console.log(resJson)
}
4、安装插件
react native Snippet
rnc ----快速生成react-native
5、路由
1-1、配置
链接
yarn add react-navigation
yarn add react-navigation-stack
yarn add react-native-reanimated react-native-gesture-handler react-native-screens
//在android/app/build.gradle 中 dependencies 选项中添加下面这两行:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
在 src/main/java/com/native02/MainActivity.java 中加上
package com.reactnavigation.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "Example";
}
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
//index.js
import 'react-native-gesture-handler'
1-2、拆分
routers
views
//routers/index.js
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomePage from '../views/HomePage';
const AppNavigator = createStackNavigator(
{
Home: {
screen: HomePage
},
},
{
initialRouteName: "Home"
}
);
export default createAppContainer(AppNavigator);
//App.js
import React from 'react';
import AppNavigator from './routers'
export default class App extends React.Component {
render() {
return <AppNavigator/>
}
}
1-3、配置导航条
1-3-1、在组件中配置
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
};
}
1-3-2、在路由中配置
const AppNavigator = createStackNavigator(
{
Home: {
screen: HomePage,
navigationOptions: {
headerTitle: "网易",
headerStyle: {
backgroundColor: "#c20c0c"
},
headerTitleStyle: {
color: "#fff"
}
}
},
}
);
1-3-3、导航条的全局配置
const AppNavigator = createStackNavigator(
...
{
initialRouteName: "Home",
//导航条的全局配置
defaultNavigationOptions: {
headerStyle: {
backgroundColor: "#c20c0c"
},
headerTitleStyle: {
color: "#fff"
},
headerTintColor:"#fff"
}
}
);
6、跳转
//配置Detail页面
const AppNavigator = createStackNavigator(
{
Home: {
screen: HomePage,
},
Detail:{
screen: DetailPage
}
}
);
//跳转
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Detail')}
/>
<Button
title="Go to Details"
onPress={this.toggleDetail}
/>
toggleDetail=()=>{
this.props.navigation.navigate('Detail',{id:"86"})
}
7、从Welcome到Home
export default class WelcomePage extends Component {
...
componentDidMount(){
this.timer = setTimeout(()=>{
this.props.navigation.navigate("Home")
},3000)
}
componentWillUnmount(){
if(this.timer){
clearTimeout(this.timer)
}
}
}
8、传值
//传递页面
export default class HomePage extends Component {
render() {
return (
<View>
<Text> HomePage </Text>
<Button
title="Go to Details"
onPress={this.toggleDetail}
/>
</View>
);
}
toggleDetail=()=>{
this.props.navigation.navigate('Detail',{id:"1001"})
}
}
//接收页面
componentDidMount(){
let id = this.props.navigation.getParam("id");
Alert.alert(id)
}
9、欢迎页跳转到首页
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import WelcomePage from '../views/WelcomePage'
import HomePage from '../views/HomePage'
//配置两个 导航器stack
const InitNavigator = createStackNavigator({
WelcomePage: {
screen: WelcomePage,
navigationOptions: {
header: null
}
}
})
const MainNavigator = createStackNavigator({
HomePage: {
screen: HomePage
}
})
//使用switch 让app中只有一个stack
const router = createSwitchNavigator({
Init: InitNavigator,
Main: MainNavigator
}, {
initialRouteName:'Init'
})
export default createAppContainer(router)
//Welcome.js
export default class WelcomePage extends Component {
componentDidMount(){
this.props.navigation.navigate("Main")
}
}
八、Icons
//1.安装
yarn add react-native-vector-icons
//2.配置 android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
//3.使用
import AntIcon from 'react-native-vector-icons/AntDesign'
import Ionicons from 'react-native-vector-icons/Ionicons'
<AntIcon name="stepforward" size={30} color="#900" />
<Ionicons name="ios-add" size={30} color="#900" />
九、底部导航的配置
yarn add react-navigation-tabs
import React from 'react'
import { createBottomTabNavigator } from 'react-navigation-tabs';
import MusicPage from '../views/tabs/MusicPage';
import MvPage from '../views/tabs/MvPage';
import Ionicons from 'react-native-vector-icons/Ionicons'
const TabNavigator = createBottomTabNavigator({
Music: {
screen: MusicPage,
navigationOptions: {
tabBarLabel: "音乐"
}
},
Mv: MvPage
}, {
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Music') {
iconName = `ios-home`
} else if (routeName === 'Mv') {
iconName = `ios-options`;
}
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: "#333",
style: {
backgroundColor: "#eee"
},
labelStyle: {
fontSize: 18
}
}
});
export default TabNavigator
//将配置好的Tabs设置给HomePage
const MainNavigator = createStackNavigator({
HomePage: {
screen:Tabs
}
})