无法在屏幕上呈现简单的 React 本机元素？

Question

我在地图函数中有一个 React-Native 三元运算符，它不会在屏幕上呈现结果，即使我可以从代码的确切位置成功地控制台日志。

CSS 确实有宽度和高度！

我在代码中的注释位置尝试了控制台日志积极的结果。
我尝试用 .
我尝试使用许多不同的库来完成我正在尝试的事情甚至从一个非常流行的 Whosebug 中获得了这段代码。

但没有任何效果

       <View>
            <Text>{questions[this.state.questionIndex].question}</Text>
            {questions[this.state.questionIndex].radios.map((text, key) => {
              <View key={key}>
                {console.log(text, key)}
                {this.state.checked == key ? (
                  <TouchableOpacity style={styles.btn} key={key}>
                    <Image style={styles.img} source={unselected} />
                    <Text>{text}</Text>
                  </TouchableOpacity>
                ) : (
                  <View key={key + 1}>
                    <TouchableOpacity
                      key={key}
                      onPress={() => {
                        this.setState({ checked: key });
                      }}
                      style={styles.btn}
                    >
                      <Image style={styles.img} source={selected} key={key + 2} />
                      <Text key={key + 3}>{text}</Text>
                    </TouchableOpacity>
                  </View>
                )}
                {this.props.showInput === key ? (
                  <TextInput
                    placeholder={this.props.placeholder}
                    ediable={true}
                    style={
                      this.props.inputSize === "small"
                        ? styles.inputSmall
                        : styles.inputLarge
                    }
                  />
                ) : null}
                }
              </View>;
            })}
</View>

我希望从评论的位置呈现一些东西

我也根据别人的回复做了一个新组件post；也没有用： ` 从 "react" 导入 React，{ 组件}；进口 { 样式表，文本，看法，方面，文本输入，可触摸的不透明度，图片 } 来自 "react-native";

     const unselected = require("./img/rb_unselected.png");
     const selected = require("./img/rb_selected.png");

     export default class Questionnaire extends Component {
       state = {
         checked: false
       };

        render() {
          {

   this.props.questions[this.props.questionIndex].radios.map((text, 
     key) => {
             return (
                 <View key={key}>
                  {console.log(
                   text,
                   key,

         this.props.questions[this.props.questionIndex].radios
                   )}
                   {this.state.checked == key ? (
                    <TouchableOpacity style={styles.btn} key={key}>
                       <Image style={styles.img} source= 
       {unselected} />
                       <Text>{text}</Text>
                    </TouchableOpacity>
                  ) : (
                    <View key={key + 1}>
                       <TouchableOpacity
                        key={key}
                        onPress={() => {
                        this.setState({ checked: key });
                        }}
                        style={styles.btn}
                       >
                        <Image style={styles.img} source={selected} 
        key={key + 2} />
                          <Text key={key + 3}>{text}</Text>
                        </TouchableOpacity>
                     </View>
                   )}
                   {this.props.showInput === key ? (
                    <TextInput
                        placeholder={this.props.placeholder}
                       ediable={true}
                       style={
                        this.props.inputSize === "small"
                           ? styles.inputSmall
                            : styles.inputLarge
                         }
                        />
                    ) : null}
                    }
                 </View>
                );
              });
             }
          }
        }

         const styles = StyleSheet.create({
           container: {
           flex: 1,
           backgroundColor: "#F5FCFF"
           },

           nextButton: {},

            invalidNextButton: {},

            backButton: {},

            img: {
             height: 100,
             width: 100
             },

            btn: {
              flexDirection: "row",
              backgroundColor: "green"
          }
          });

`

Answer 1

尝试在 map 函数中返回代码。

<View>
    <Text>{questions[this.state.questionIndex].question}</Text>
    {questions[this.state.questionIndex].radios.map((text, key) => {
       return(
           <View key={key}>
               {console.log(text, key)}
               {this.state.checked == key ? (
                   <TouchableOpacity style={styles.btn} key={key}>
                       <Image style={styles.img} source={unselected} />
                       <Text>{text}</Text>
                   </TouchableOpacity>
               ) : (
                   <View key={key + 1}>
                       <TouchableOpacity
                           key={key}
                           onPress={() => {this.setState({ checked: key });}}
                           style={styles.btn} >
                           <Image style={styles.img} source={selected} key={key + 2} />
                           <Text key={key + 3}>{text}</Text>
                       </TouchableOpacity>
                   </View>
               )}
               {this.props.showInput === key ? (
                   <TextInput
                       placeholder={this.props.placeholder}
                       ediable={true}
                       style={
                           this.props.inputSize === "small"
                           ? styles.inputSmall
                           : styles.inputLarge } />
               ) : null }
           </View>
       )
   })}
</View>

无法在屏幕上呈现简单的 React 本机元素？

Can't render a simple react native element on screen?

javascript

render

react-native