現在 ReactNative を使って、アプリを作っています。
オブジェクトの配列にあるユーザー情報を map()を用いて描画しています。
<スクリーン>
javascript
1//初期化 2constructor(props) { 3 super(props); 4 this.state = ({ 5 userList: [ 6 { id: 1, iconUri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg", userName: 'Momoka', followStatus: true }, 7 { id: 2, iconUri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg", userName: 'Tinatsu', followStatus: false }, 8 { id: 3, iconUri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg", userName: 'Nakagawa', followStatus: true }, 9 { id: 4, iconUri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg", userName: 'Haruna', followStatus: true }, 10 ], 11 }); 12 this.handleFollowChange = this.handleFollowChange.bind(this); 13} 14 15// フォローボタン機能 16handleFollowChange(key) { 17 tmpUserList = this.state.userList; 18 tmpUserList[key].followStatus = !(tmpUserList[key].followStatus); 19 this.setState({ userList: tmpUserList }); 20}; 21 22//レンダリング 23render () { 24{this.state.userList.map((item, key) => { 25 if (item.followStatus) { 26 buttonColor = '#0088FF'; 27 buttonText = 'フォロー'; 28 } else { 29 buttonColor = '#2244AA'; 30 buttonText = '解除'; 31 } 32 console.log(item.followStatus); 33 return ( 34 <View key={item.id}> 35 <UserContainer 36 userName={item.userName} 37 userIcon={item.iconUri} 38 associated={"follow"} 39 handleFollowChange={() => this.handleFollowChange(key)} 40 buttonColor={buttonColor} 41 buttonText={buttonText} 42 /> 43 </View> 44 ); 45 })} 46}
<UserContainerコンポーネント>
javascript
1constructor(props) { 2 super(props); 3 this.state = { 4 userName: this.props.userName, 5 userIcon: this.props.userIcon, 6 associated: this.props.associated, 7 buttonColor: this.props.buttonColor, 8 buttonText: this.props.buttonText, 9 handleFollowChange: this.props.handleFollowChange, 10 }; 11} 12render() { 13 // console.log(this.state.userName) 14 return ( 15 <View> 16 <TouchableOpacity 17 style={[UserContainerStyle.userContainer, { borderWidth: 1, borderColor: '#888', }]} 18 onPress={() => Actions.profile()} 19 > 20 <Avatar 21 containerStyle={UserContainerStyle.userAvatar} 22 size={40} 23 rounded 24 source={{ uri: this.state.userIcon }} 25 activeOpacity={0.7} 26 /> 27 <Text style={UserContainerStyle.UserName}>{this.state.userName}</Text> 28 {(() => { 29 /* フォローボタンが必要なユーザーコンテナ */ 30 if (this.state.associated === "follow") { 31 console.log(this.state); 32 return ( 33 <View> 34 <Button 35 title={this.state.buttonText} 36 onPress={this.state.handleFollowChange} 37 containerViewStyle={UserContainerStyle.FollowButton} 38 buttonStyle={{ backgroundColor: this.state.buttonColor }} 39 /> 40 </View> 41 ); 42 } else { 43 return ( 44 <View> 45 </View> 46 ); 47 } 48 })()} 49 </TouchableOpacity> 50 </View> 51 ); 52 }
UserContainerにある、フォローボタンを押した際に、 「テキスト」と「カラー」が変わることを想定して書いております。(イメージはツイッターのフォローボタン)
しかしながら、仮想DOMの特性上、UserContainer自体は外から見て、変わっているようには見えないので、ボタンの 「テキスト」と「カラー」が変化してくれません。
どうしたら、変える事ができるのでしょうか? 皆様のお知恵をお借りしたいです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/14 08:10
2018/12/14 08:15 編集
2018/12/14 08:51
2018/12/14 09:22