Question

在React Native平台上工作时，我遇到了很多UI和动态挑战，但在这里我有多种观点，我正在按照API响应动态创建，例如

如果数据长度为3

for(i=0;i<data.length;i++)
{
    this.setState({ responseData:
        <View>
            <Text>{data[i].title}</Text>
            <Text>Click to view more +</Text>
            <View style={{height: 0}}>
                <Text>View {i}</Text>
                <Text>{data[i].requesttext}</Text>
                <Text>{data[i].responsetext}</Text>
            </View>
        </View>
    })
}

render(
    <View style={styles.maincontainer}>
        {this.state.reponseData}
    </View>
)

//Make sure that I have written the above code just for an understanding.

输出

--------------------------
Test Title 1
Click to view more -

    View 0
    this is request
    this is response

--------------------------
Test Title 2
Click to view more +
--------------------------
Test Title 3
Click to view more +
--------------------------

如果我的数据长度为3，则我将创建3个视图并进行渲染。现在，我的要求是如何显示或设置自动高度（因为在react native中没有可用的显示属性），我要单击该视图以查看更多

是否有ID或类之类的东西可以引用该特定视图来设置样式？

我尝试过refs Refs to Components，但是它给了我诸如父视图节点之类的错误，实际上我不知道如何使用它。

由于它是动态的，因此也无法设置状态。

如果您没有理解我的意思，请告诉我，或者为我提供任何建议以实现此目标。谢谢！

Answer 1

尝试以下代码：

构造函数：

   var  views = [];

    for(i=0;i<data.length;i++)
    {
        views.push(
            <View ref={ref=>this['view_'+i]}>
                <Text>{data[i].title}</Text>
                <Text>Click to view more +</Text>
                <View style={{height: 0}}>
                    <Text>View {i}</Text>
                    <Text>{data[i].requesttext}</Text>
                    <Text>{data[i].responsetext}</Text>
                </View>
            </View>
        }
    }
   this.state = {views};

渲染：

render(
    <View style={styles.maincontainer}>
        {{this.state.views}}
    </View>
)

要隐藏任何视图：

 onPress() {
      const views = this.state.views;
      // remove item that you want to hide here from views array
      this.setState({views})
  }

Answer 2

尝试如下所示，分成两个部分可以解决您的问题。假设您有如下数据，以下面的案例为例

const sampleJson = [
    {
        id: 1,
        name: "Green Tea",
        description: "This is Green Tea",
        imageurl: "https://www.mozismenu.com/wp-content/uploads/2017/04/Chicken-Keema-Samosa-0.jpg"
    },
    {
        id: 2,
        name: "Burger",
        description: "This is Burger",
        imageurl: "https://www.mozismenu.com/wp-content/uploads/2017/04/Chicken-Keema-Samosa-0.jpg"
    },
    {
        id: 3,
        name: "Pizza",
        description: "This is Pizza",
        imageurl: "https://www.mozismenu.com/wp-content/uploads/2017/04/Chicken-Keema-Samosa-0.jpg"
    }
]

//HomePage Component
import Home from "../components/Home";
export default class HomePage extends Component{
    render(){
        return(
            <ScrollView style={styles.container1}>
                {   sampleJson.map((data, index) => {
                        return(
                            <View style={styles.container} key={data.id}>
                                <Text style={styles.welcome}>{data.name}</Text>
                                <Home display={false} data={data}/>  //Here i'm sending the prop display as false initially for every view, and also sending the data as prop data.
                            </View>
                        )
                    })
                }                
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    container1: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    welcome2: {
        fontSize: 16,
        textAlign: 'center',
        margin: 5,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
    container3: {
        backgroundColor: '#0098cd',
        display: "none"
    }
  });

//Home Component
export default class Home extends Component{
  constructor(props){
    super(props);
    this.state = {
      show: this.props.display,  //Each one will depend on its own state
      data: this.props.data
    }
  }
  render() {
    return (
      <View style={styles.container}>        
        <Text style={styles.welcome} onPress={()=> this.setState({ show: !this.state.show})}>Click to view more +</Text> //It will set the flag is false if true and will set as true if false.
        //If the show prop in state is false, it renders null
        { this.state.show === true 
          ? ( <View style={styles.container3}>
                <Text style={styles.welcome2}>View </Text>
                <Text style={styles.welcome2}>{this.state.data.description}</Text>
              </View>
            )
          : null
        }
      </View>
    );
  }
}

隐藏/显示动态创建的视图-React Native

2 个答案: