React Native - Props, State , Style

React Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件。要理解 React Native 应用的基本结构，首先需要了解一些基本的 React 的概念，比如 JSX 语法、组件、state状态以及props属性.

我们来了解一些原生的原生：

1. View ， 类似html中div，Span 容器
2. Text，用于显示文本。类似html中label
3. Image，用于显示图片，src 为显示图片路径。类似html中img标签

 

Props ： 

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。

export default class HelloWorldApp extends Component {
    render() {
        return (
            <View>
                <Login text="Hello Allen."/>
            </View>
        );
    }
}


class Login extends Component {
    render() {
        return (
            <Text>{this.props.text}</Text>
        );
    }
}

State：

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在 constructor 中初始化state（译注：这是 ES6 的写法，早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

每次调用setState时，Component 都会重新执行 render 方法重新渲染。所以State 的工作原理和 React.js 完全一致

译注：提示一些初学者应该牢记的要点：

• 一切界面变化都是状态state变化
• state的修改必须通过setState()方法
  • this.state.likes = 100; // 这样的直接赋值修改无效！
  • setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
  • setState 是异步操作，修改不会马上生效

 

class Timer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowingText: true
        };

        setInterval(() => {
            this.setState(prev => {
                return { isShowingText: !prev.isShowingText }
            });
        }, 1000);
    }

    render() {
        if (!this.state.isShowingText) {
            return null;
        }

        return (
            <Text>{this.props.text}</Text>
        );
    }
}

　

Style：

在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的 JavaScript 对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。这跟Javascript中的预编译类似。相同的名字。后面的方法或者函数将会替换先定义的函数和方法。

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

定义一个const 的styles css变量，在标签中我们可以直接使用。

//单个css
<Text style={styles.bigblue}>just bigblue</Text>
//多个css
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>

我们也可以直接在style中定义属性和值

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />