Question

我已经以反应原生方式以编程方式创建了5个Text。我想更改视图的borderColor颜色通过单击项目。我尝试使用下面的代码。但它改变了所有5个视图的borderColor颜色。我想只改变一个视图的borderColor颜色。

for (var i = 0; i < 4; i++) {
      pills.push (this.renderPill (i));
    }


 renderPill (index) {
return (
  <TouchableOpacity key={index} style={ this.state.status ? boxStyle : boxStyleSelected } onPress={this.itemClick.bind(this)}>
    <View >
      <Text>
        {index}
      </Text>
    </View>
  </TouchableOpacity>

);


  }
}
multiItemClick (index) {

    this.setState({ status: true });

  }

    boxStyle: {

    borderColor: '#ffffff',


  },
  boxStyleSelected: {

    borderColor: '#000000',


  }

Answer 1

问题是，您正在为所有视图使用状态。尝试将代码修改为某些内容，这取决于您单击的索引。

for (var i = 0; i < 4; i++) {
      pills.push (this.renderPill (i));
    }


 renderPill (index) {
return (
  <TouchableOpacity key={index} style={ this.state.status[index] ? boxStyle : boxStyleSelected } onPress={(index) => this.itemClick(index)}>
    <View >
      <Text>
        {index}
      </Text>
    </View>
  </TouchableOpacity>

);

itemClick(index) {
let status = this.state;
status[index] = true;
this.setState({
   status: status   
})

我没有测试过这个，所以我对语法并不是100％肯定，但我认为这个想法很明确。您必须保存在数组中单击的项目，因此您知道必须使用不同的边框呈现哪个项目。

但我也建议在这里使用FlatList https://facebook.github.io/react-native/docs/flatlist.html因为你要做的是渲染一个可点击的列表。这将为您提供对项目，直接样式和列表容器的更多控制。此外，您不需要有两个单独的列表，但可以使用像这样的对象数组

{
   value: 1
   clicked: true
}

使其更具可读性和可维护性。

编辑：在提供的链接上实际上有一个多选的代码示例，我将它改编成你的药片。只需将数组从其他地方传递给组件即可。需要ID和标题。视图看起来像这样：

代码是这样的：

export default class MyView extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            pills: [{id: 1, title: 'Pill 1'},
                    {id: 2, title: 'Pill 2'},
                    {id: 3, title: 'Pill 3'}],
        };
    }

    render() {
        const {pills} = this.state;
        return (
            <MultiSelectList data={pills}/>
        );
    }

}

class MultiSelectList extends React.PureComponent {
    state = {selected: (new Map())};

    _keyExtractor = (item, index) => item.id;

    _onPressItem = (id) => {
        // updater functions are preferred for transactional updates
        this.setState((state) => {
            // copy the map rather than modifying state.
            const selected = new Map(state.selected);
            selected.set(id, !selected.get(id)); // toggle
            return {selected};
        });
    };

    _renderItem = ({item}) => (
        <MyListItem
            id={item.id}
            onPressItem={this._onPressItem}
            selected={!!this.state.selected.get(item.id)}
            title={item.title}
        />);

    render() {
        return (
            <FlatList
                data={this.props.data}
                extraData={this.state}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
            />
        );
    }
}

class MyListItem extends React.PureComponent {
    _onPress = () => {
        this.props.onPressItem(this.props.id);
    };

    render() {
        const color = this.props.selected ? "red" : "black";
        return (
            <TouchableOpacity onPress={this._onPress}>
                <View>
                    <Text style={{borderStyle: 'solid', borderWidth: 2, borderColor: color }}>
                        {this.props.title}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }
}

Answer 2

您应该使用 FlatList 来呈现项目或组件列表。

以下是一个例子：

    mToolbar.setVisibility(View.GONE);


    if(mToolbar.getVisibility() == View.GONE){
        int mTb = 0;
        mWebView.requestLayout();
        mWebView.getLayoutParams().height = 567;
    }

分隔项目列表

render() {
return (
  <View style={styles.container}>
    <FlatList
      data={ this.state.listItem }
      ItemSeparatorComponent = {this._itemSeparator}
      keyExtractor={(item, index) => index}
      renderItem={this._renderItem}
      selected={this.state.selected}
    />
  </View>  
);}

渲染项目列表

_itemSeparator = () => (<View style={{ height: 1, backgroundColor: "#607D8B" }}/>);

点击项目上的事件以更改样式

_renderItem = (item) => {
return (
  <TouchableOpacity 
    key={item.index} 
    style={this.state.selected == item.index ? styles.boxSelected : styles.boxStyle} 
    onPress={()=>this._itemClick(item)}
  >
    <View style={{alignItems:'center'}}>
      <Text>
        {item.item.key}
      </Text>
    </View>
  </TouchableOpacity>
);}

数据状态

_itemClick(item) { this.setState({selected:item.index}) }

样式列表您的项目

constructor(props){
super(props);

this.state = { 
  selected: null,
  listItem: [
    {key: 'One'},
    {key: 'Two'},
    {key: 'Three'},
    {key: 'Four'},
    {key: 'Five'},
    {key: 'Six'},
    {key: 'Seven'},
    {key: 'Eight'},
    {key: 'Nine'},
    {key: 'Ten'},
    {key: 'Eleven'},
    {key: 'Twelve'}
  ]
};}

enter image description here

这就是我得到的，希望它能节省您的时间。

React Native：如何更改动态视图borderColor颜色？

2 个答案: