碎碎念

Q: 使用native base的segment元件，想要讓他動態依照點擊哪個按鈕就設那個按鈕的active屬性為true。

A:

1. 在state設定一個變數，用來控制目前要設哪一個button為active

2. 在segment下面每個button的active都加上判斷state的變數內容，符合才設為ture

3. 在button的onPress事件加上this.setState()去改變第一步設定的變數內容

直接看範例:

轉自 https://github.com/GeekyAnts/NativeBase/issues/1095

<segment>
							<Button
								style={{
									backgroundColor: this.state.seg === 1 ? "red" : undefined,
									borderColor: "red",
								}}
								first
								active={this.state.seg === 1 ? true : false}
								onPress={() => this.setState({ seg: 1 })}
							>
								<Text style={{ color: this.state.seg === 1 ? "#FFF" : "red" }}>Puppies</Text>
							</Button>
							<Button
								last
								style={{
									backgroundColor: this.state.seg === 2 ? "red" : undefined,
									borderColor: "red",
								}}
								active={this.state.seg === 2 ? true : false}
								onPress={() => this.setState({ seg: 2 })}
							>
								<Text style={{ color: this.state.seg === 2 ? "#FFF" : "red" }}>Cubs</Text>
							</Button>
						</Segment>