react native 样式分离

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    Button,
    View
} from 'react-native';

import teststyles from '../../src/stylediv/teststyles';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (

            <View style={  teststyles.container}>
                <Text style={teststyles.welcome}>
                    Welcome to React Native!cccc
                </Text>
                <Text style={teststyles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={teststyles.instructions}>
                    {instructions}
                </Text>
                <Button title={"测试2233"} onPress={()=>this.showMovieDetail()}/>
            </View>
        );
    }

    showMovieDetail() {

        let a = "123";
        alert('aa');
        console.log(`a`);
        alert('cee');
    }
}

样式

import React from 'react';
import {
    StyleSheet
} from 'react-native';


export const  teststyles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'green',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

module.exports = teststyles;

需要注意的是在样式中的文件名称需要和module.exports的名字相同，

具体的组件中import teststyles from '../../src/stylediv/teststyles';这个名字也得和样式的名字相同

最后样式中需要有module.exports = teststyles