Raect Native之六 state的使用
阿新 • • 發佈:2018-12-18
-
什麼是state?
props是不可改變,只讀的。為了實現互動,就需要用到元件的state。我. 們將元件看為狀態機,UI是各種各樣的狀態,並在各種各樣的狀態之間可以切換,只需要改變元件的state,就會重新渲染UI。 state是元件私有的,是沒有辦法通過其他元件傳遞過來的 -
如何使用state?
state的兩種宣告方式1. state = { size: 70, } 2. constructor(props) { super(props); this.state ={ size:60, } }
-
state如何打氣球?
export default class StateTestView extends Component { state = { size: 70, } constructor(props) { super(props); // this.state ={ // size:60, // } } render() { return <View> <Text style={{ fontSize: 26 }} onPress={() => { this.setState({ size: this.state.size + 10 }) }} >我打呀打呀 </Text> <Image style={{ width:this.state.size, height:this.state.size ,top:30}} source={require('../state/image/qiqiu.png')} /> </View> } }
每次呼叫setState時,BlinkApp 都會重新執行 render 方法重新渲染。這裡我們使用定時器來不停呼叫setState,於是元件就會隨著時間變化不停地重新渲染。