程式碼：

import React, { Component } from 'react';
import {
    StyleSheet,
Text,
View,
TouchableHighlight,
SwipeableFlatList,//側滑列表
} from 'react-native';
const CITY_NAMES = ['北京', '上海', '廣州','杭州', '蘇州'];
export default class FlatListDemo extends Component<Props> {
    static navigationOptions = {
        title
 
: 'SwipeableFlatList',
};
//側滑選單渲染
getQuickActions=()=>{
            return <View style={styles.quickAContent}>
                        <TouchableHighlight
onPress={()=>alert("確認刪除？")}
                        >
                            <View style={styles.quick}>
                                <Text 
 
style={styles.delete}>刪除</Text>
                            </View>
                        </TouchableHighlight>
                  </View>
};
render() {
        return (
            <View style={styles.container}>
                <SwipeableFlatList
//1資料的獲取和渲染
data={CITY_NAMES}
                    renderItem
 
={(data) =>   <View style={styles.item}>
                                                <Text style={styles.text}>{data.item}</Text>
                                            </View>}

                    //2建立側滑選單
renderQuickActions={()=>this.getQuickActions()}//建立側滑選單
maxSwipeDistance={80}//可展開（滑動）的距離
                   // bounceFirstRowOnMount={false}//進去的時候不展示側滑效果
/>
            </View>
);
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
},
item: {
        backgroundColor: '#aeffb1',
height: 100,
marginRight: 15,
marginLeft: 15,
marginBottom: 10,
alignItems: 'center',
justifyContent: 'center',
elevation:5,//漂浮的效果
borderRadius:5,//圓角
},
text: {
        color: '#444444',
fontSize: 20,
},
//側滑選單的樣式
quickAContent:{
        flex:1,
flexDirection:'row',
justifyContent:'flex-end',
marginRight:15,
marginBottom:10,
},
quick:{
        backgroundColor:"#ff1d49",
flex:1,
alignItems:'flex-end',//水平靠右
justifyContent:'center',//上下居中
width:100,
borderRadius:5,
elevation:5,//漂浮的效果
},
delete:{
        color:"#d8fffa",
marginRight:30
}
});

效果圖：