react-native 入門基礎介紹

最後更新：2018-10-14 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：iss rop 文字興趣 start tps not draw 不同

安裝
項目
- 主要目錄結構
- 入口
  - Home模組
  - Coobook模組
  - List模組
  - novel模組
相關參考

一個簡單的demo，用於介紹react-native相關基礎資訊，主要是針對有興趣的同學參考；以下內容及代碼在2018-08測試有效。

完整項目代碼：https://github.com/NameHewei/react-native

安裝

npm install -g create-react-native-app
create-react-native-app you-app-name
cd you-app-name
npm start
download Expo app：https://expo.io/（可能要註冊）在手機上安裝
掃描 npm start 後顯示的二維碼

為了項目順利，請備好梯子！

這裡是通過在手機上安裝Expo，然後用Expo掃描啟動項目後產生的二維碼來預覽你的react-native項目，前提是PC的IP要與手機的IP在同一個網段內。Expo打包你的項目後，每次PC端Ctrl+S都會自動更新Expo的內容。本文不介紹安裝模擬器的開發方式，需要的請自行Google。

項目主要目錄結構

|—— app.js|—— view  |—— Home.js    |—— cookbook        |—— Cookbook.js        |—— Detail.js        |—— List.js    |—— novel        |—— Novel.js

以下所有涉及組件屬性請參考文章最後官網連結進行查看，本文只對關鍵屬性作說明。

路由群組件使用：react-native

UI組件使用：native-base

入口

export default createDrawerNavigator({    home: {        screen: Home    },    novel: {        screen: Novel    },    cookbook: {        screen: Cookbook    },}, {    drawerBackgroundColor: ‘#ffffff‘,    contentOptions: {        activeTintColor: ‘#e91e63‘,    }});

首頁使用側滑（createDrawerNavigator）路由群組件，預設顯示路由為對象的第一個屬性值。

Home模組

export default class Home extends Component {    static navigationOptions = {        drawerLabel: ‘Home‘,        drawerIcon: ({ tintColor }) => (            <Image                source={require(‘./../public/img/menu.png‘)}                style={[styles.icon, { tintColor: tintColor }]}            />        ),    };    render() {        return (                <View                style={{ flex: 1, marginTop: 20 }}            >                <View                    style={{ flex: 1, alignItems:‘center‘, justifyContent: ‘center‘ }}                >                    <TouchableHighlight                         underlayColor={ ‘#fff‘ }                        activeOpacity={ 1 }                        onPress={ () => this.props.navigation.openDrawer() }>                        <Image                            style={{ height: 220, width: 220, borderRadius: 110 }}                            source={require(‘./../public/img/avatar.jpg‘)}                        />                     </TouchableHighlight>                </View>            </View>        );    }}

該頁面主要是首屏顯示內容，根據頁面代碼注意以下三點:

圖片連結要用TouchableHighlight
使用navigation.openDrawer()方法開啟側滑
圖片地址要用require(url)方法引入

Coobook模組

const navigationConfig = {    header: null}export default App = createStackNavigator({    List: {        screen: List,        path: ‘list/:id‘,        navigationOptions: (navigation) => (navigationConfig)    },    Detail: {         screen: Detail,        navigationOptions: (navigation) => ({            title: ‘詳情‘        })    },})

cook模組功能是提供一個列表頁，點擊清單項目進入詳情頁，注意以下三點：

用createStackNavigator路由群組件實現。
List 頁面不需要頂部的header所以設定為null(具體參見文檔)
因為詳情頁需要id這裡可以用list/:id傳參

List模組

export default class ListComponent extends Component {    render() {        return (                <View                style={{ flex: 1, paddingTop: 20 }}            >                <Container>                    <Content>                        <List>                            <ListItem avatar onPress={() => {                                this.props.navigation.navigate(‘Detail‘, {                                    id: 0                                })                            }}>                                <Left>                                    <Thumbnail source={{ uri: ‘http://xx.jpg‘ }} />                                </Left>                                <Body>                                    <Text>回鍋肉</Text>                                    <Text note>一道好吃到板的菜</Text>                                </Body>                                <Right>                                    <Text note>2018-08-21</Text>                                </Right>                            </ListItem>                    </List>                    </Content>                </Container>            </View>        );    }}

該組件用到了native-base UI組件

注意以下四點：

注意組件只能用提供的，style的屬性也是只能用提供的。
頂部功能表列高為20 ，所有寬高都不需要加單位，會自動轉化為裝置單位
文字必須要用Text包裹
路由跳轉由navigation.navigate(‘name‘, params)實現

novel模組

export default createBottomTabNavigator({    Home: {        screen: HomeScreen,        navigationOptions: () => ({            tabBarVisible : true,            title: ‘螞蟻國度‘,            headerBackTitle: null        }),     },    Settings: {        screen: SettingsScreen,        navigationOptions: () => ({            tabBarVisible : true,            title: ‘最強神級兵王‘,            headerBackTitle: null            }),    },    }, {        headerMode: ‘screen‘,    });

該模組採用在底部點擊功能表按鈕的形式來查看不同小說，所以採用新的路由方式：

使用createBottomTabNavigator切換screen
頁面內容多需要滑動，需用ScrollView組件包裹

相關參考

RN官網：https://facebook.github.io/react-native/
React Navigation官網: https://reactnavigation.org/
nativeBase組件:https://nativebase.io/

若有疑問或錯誤，請指正，謝謝！Github blog issues

react-native 入門基礎介紹

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More