RN

图标组件库

下载：npm i react-native-vector-icons
配置：修改文件：android/app/build.gradle
添加：apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
引入：import Icon from 'react-native-vector-icons/[class]'; // class为分类目录
使用：<Icon name="rocket" size={30} color="#900" />;

数据列表

   <FlatList
      numColumns={2}  列数
      data={goods}    // 数据
      keyExtractor={(item) => item.id}   //key  字符串类型
      renderItem={({item}) => <Text>名字：{item.name}</Text>}    //返回数据.  只能是item
    />

网络

  useEffect(() => {
    fetch('http://rap2.taobao.org:38080/app/mock/248624/index-swipt')
      .then((res) => res.json())   //先转换为json
      .then((redJson) => {
        setList(redJson.data);
      });
  }, []);

图片

   <Image
        style={{width: 200, height: 200}}
        source={{
          uri: 'xxx',
        }}
      />

本地图片：source={require('./iange.png')}
只有本地图片可以不需要设置宽高其他类型都需要设置宽高

ReactNavigation路由导航

1.下包
npm install @react-navigation/native
2.依赖
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
3./index.js入口文件  顶端添加
import 'react-native-gesture-handler';
4.整个app使用 <NavigationContainer></NavigationContainer>包起来
import { NavigationContainer } from '@react-navigation/native';
----------------------------------------------------------------------
5.Stack导航器
npm install @react-navigation/stack
6.注册页面
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

<NavigationContainer initialRouteName="Home">    // initialRouteName默认页面
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
</NavigationContainer>
7.配置选项
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>
8.跳转
点击事件是onPress，每个页面都有navigation属性
onPress={() => navigation.navigate('Home')}
9跳转
navigation.navigate('Home')
navigation.popToTop()
navigation.oush(‘路由’)
navigation.goBack()
navigation.replace('index');
9.传递参数
传递：navigation.navigate('Home',{name:"123"})}
接收：route.params.name
10.标题栏样式
Stack.Screen内的属性
options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
共享页头样式：吧样式写到父元素上
11.修改当前组件的title
navigation.setOptions({ title: 'Updated!' })
12.组件替换标题
options={{ headerTitle: props => <LogoTitle {...props} /> }}
13.隐藏顶部导航
修改Stack.Navigator属性
screenOptions={{
          headerShown: false,
        }}>

本地存储

npm i @react-native-community/async-storage
import AsyncStorage from '@react-native-community/async-storage';

AsyncStorage.setItem('login_token',token);
AsyncStorage.getItem('login_token');

需要使用 async await 装饰

拍照或者选择照片

https://github.com/ivpusic/react-native-image-crop-picker

Video视频

https://github.com/react-native-community/react-native-video

      <Video
          style={{
            width: '100%',
            height: 500,
          }}
          resizeMode="cover"   // 布局
          controls={true}   //控制台
          repeat={true}   // 重复播放
          source={{uri: url}} 
        />

状态条

<StatusBar translucent={true} backgroundColor="rgba(0,0,0,0)" />

获取窗口尺寸

const {height} = Dimensions.get('window');

动画

const [rotate] = useState(new Animated.Value(0));

 <Animated.Image
        style={{
          transform: [
            {
              rotate: rotate.interpolate({
                inputRange: [0, 1], // 输入范围
                outputRange: ['0deg', '360deg'], //输出范围
              }),
            },
          ],
        }}
        source={require('./zzc.jpg')}
      />


<Button
        title="zhuan"
        onPress={() => {
          rotate.setValue(0);
          let ani = Animated.timing(rotate, {
            toValue: 1, // 改变的值
            duration: 500, // 速度
            useNativeDriver: true, // 时候开启动画驱动
          });
          ani.start(); //启动
        }}
      />
无限循环动画:在ani.start()函数内 有个函数是结束是的操作,将动画封装起来,在调用自己

点击事件

  TouchableOpacity,
  TouchableWithoutFeedback,
  TouchableNativeFeedback,

使用:

<TouchableOpacity
        onPress={() => {
          Alert.alert('asdf');
        }}>
        <Image source={require('./zzc.jpg')} />
</TouchableOpacity>

WishMeLz

RN